Mark cloud as beta (#10992)

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

@@ -48,8 +48,12 @@ export const TEXT_STYLE = twv.tv({
     variant: {
       custom: '',
       body: 'text-xs leading-[20px] before:h-[1px] after:h-[3px] font-medium',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'body-sm': 'text-[10.5px] leading-[16px] before:h-[0.5px] after:h-[2.5px] font-medium',
       h1: 'text-xl leading-[29px] before:h-0.5 after:h-[5px] font-bold',
       subtitle: 'text-[13.5px] leading-[19px] before:h-[1px] after:h-[3px] font-bold',
+      caption: 'text-[8.5px] leading-[12px] before:h-[0.5px] after:h-[1.5px]',
+      overline: 'text-[8.5px] leading-[16px] before:h-[0.5px] after:h-[1.5px] uppercase',
     },
     weight: {
       custom: '',

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

@@ -0,0 +1,77 @@
+/**
+ * @file
+ *
+ * Badges are used to highlight an item's status for quick recognition.
+ */
+import type { VariantProps } from '#/utilities/tailwindVariants'
+import { tv } from '#/utilities/tailwindVariants'
+import type { ReactNode } from 'react'
+import { TEXT_STYLE } from '../AriaComponents'
+
+/**
+ * Props for the {@link Badge} component.
+ */
+export interface BadgeProps extends VariantProps<typeof BADGE_STYLES> {
+  readonly children?: ReactNode
+  readonly className?: string
+}
+
+export const BADGE_STYLES = tv({
+  base: 'flex items-center justify-center px-[5px] border-[0.5px]',
+  variants: {
+    variant: {
+      solid: 'border-transparent bg-[var(--badge-bg-color)] text-[var(--badge-text-color)]',
+      outline: 'border-[var(--badge-border-color)] bg-transparent text-[var(--badge-text-color)]',
+    },
+    color: {
+      primary:
+        '[--badge-border-color:var(--color-primary)] [--badge-bg-color:var(--color-primary)] [--badge-text-color:var(--color-invert)]',
+      accent:
+        '[--badge-border-color:var(--color-accent)] [--badge-bg-color:var(--color-accent)] [--badge-text-color:var(--color-invert)]',
+      error:
+        '[--badge-border-color:var(--color-danger)] [--badge-bg-color:var(--color-danger)] [--badge-text-color:var(--color-invert)]',
+    },
+    rounded: {
+      true: 'rounded-full',
+      false: 'rounded-none',
+      none: 'rounded-none',
+      small: 'rounded-sm',
+      medium: 'rounded-md',
+      large: 'rounded-lg',
+      xlarge: 'rounded-xl',
+      xxlarge: 'rounded-2xl',
+      xxxlarge: 'rounded-3xl',
+      xxxxlarge: 'rounded-4xl',
+      full: 'rounded-full',
+    },
+  },
+  slots: {
+    icon: 'flex items-center justify-center',
+    content: TEXT_STYLE({
+      variant: 'body-sm',
+      color: 'current',
+      className: '',
+    }),
+  },
+  defaultVariants: {
+    variant: 'solid',
+    color: 'primary',
+    rounded: 'xxxxlarge',
+    iconPosition: 'start',
+  },
+})
+
+/**
+ * Badges are used to highlight an item's status for quick recognition.
+ */
+export function Badge(props: BadgeProps) {
+  const { children, color, rounded, className, variant } = props
+
+  const classes = BADGE_STYLES({ color, rounded, variant })
+
+  return (
+    <div className={classes.base({ class: className })}>
+      <div className={classes.content()}>{children}</div>
+    </div>
+  )
+}

app/dashboard/src/components/Badge/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file
+ *
+ * Barrel export file for Badge
+ */
+export * from './Badge'

app/dashboard/src/layouts/CategorySwitcher.tsx

@@ -16,7 +16,7 @@ import SettingsIcon from '#/assets/settings.svg'
 import Trash2Icon from '#/assets/trash2.svg'
 import * as aria from '#/components/aria'
 import * as ariaComponents from '#/components/AriaComponents'
-import FocusArea from '#/components/styled/FocusArea'
+import { Badge } from '#/components/Badge'
 import SvgMask from '#/components/SvgMask'
 import * as mimeTypes from '#/data/mimeTypes'
 import AssetEventType from '#/events/AssetEventType'
@@ -77,11 +77,12 @@ interface CategoryMetadata {
 interface InternalCategorySwitcherItemProps extends CategoryMetadata {
   readonly currentCategory: Category
   readonly setCategory: (category: Category) => void
+  readonly badgeContent?: React.ReactNode
 }
 
 /** An entry in a {@link CategorySwitcher}. */
 function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
-  const { currentCategory, setCategory } = props
+  const { currentCategory, setCategory, badgeContent } = props
   const { isNested = false, category, icon, label, buttonLabel, dropZoneLabel } = props
   const { iconClassName } = props
   const { user } = authProvider.useFullUserSession()
@@ -258,6 +259,11 @@ function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
           <ariaComponents.Text slot="description" truncate="1" className="flex-auto">
             {label}
           </ariaComponents.Text>
+          {badgeContent != null && (
+            <Badge color="accent" variant="solid">
+              {badgeContent}
+            </Badge>
+          )}
         </div>
       </ariaComponents.Button>
       <div className="absolute left-full ml-2 hidden group-focus-visible:block">
@@ -354,199 +360,196 @@ export default function CategorySwitcher(props: CategorySwitcherProps) {
   )
 
   return (
-    <FocusArea direction="vertical">
-      {(innerProps) => (
-        <div className="flex flex-col gap-2 py-1" {...innerProps}>
-          <ariaComponents.Text variant="subtitle" className="px-2 font-bold">
-            {getText('category')}
-          </ariaComponents.Text>
+    <div className="flex flex-col gap-2 py-1">
+      <ariaComponents.Text variant="subtitle" className="px-2 font-bold">
+        {getText('category')}
+      </ariaComponents.Text>
 
-          <div
-            aria-label={getText('categorySwitcherMenuLabel')}
-            role="grid"
-            className="flex flex-col items-start"
-          >
+      <div
+        aria-label={getText('categorySwitcherMenuLabel')}
+        role="grid"
+        className="flex flex-col items-start"
+      >
+        <CategorySwitcherItem
+          {...itemProps}
+          category={{ type: 'cloud' }}
+          icon={CloudIcon}
+          label={getText('cloudCategory')}
+          buttonLabel={getText('cloudCategoryButtonLabel')}
+          dropZoneLabel={getText('cloudCategoryDropZoneLabel')}
+          badgeContent={getText('cloudCategoryBadgeContent')}
+        />
+        {(user.plan === backend.Plan.team || user.plan === backend.Plan.enterprise) && (
+          <CategorySwitcherItem
+            {...itemProps}
+            isNested
+            category={{
+              type: 'user',
+              rootPath: backend.Path(`enso://Users/${user.name}`),
+              homeDirectoryId: selfDirectoryId,
+            }}
+            icon={PersonIcon}
+            label={getText('myFilesCategory')}
+            buttonLabel={getText('myFilesCategoryButtonLabel')}
+            dropZoneLabel={getText('myFilesCategoryDropZoneLabel')}
+          />
+        )}
+        <CategorySwitcherItem
+          {...itemProps}
+          isNested
+          category={{ type: 'recent' }}
+          icon={RecentIcon}
+          label={getText('recentCategory')}
+          buttonLabel={getText('recentCategoryButtonLabel')}
+          dropZoneLabel={getText('recentCategoryDropZoneLabel')}
+          iconClassName="-ml-0.5"
+        />
+        <CategorySwitcherItem
+          {...itemProps}
+          isNested
+          category={{ type: 'trash' }}
+          icon={Trash2Icon}
+          label={getText('trashCategory')}
+          buttonLabel={getText('trashCategoryButtonLabel')}
+          dropZoneLabel={getText('trashCategoryDropZoneLabel')}
+        />
+        {usersDirectoryQuery.data?.map((userDirectory) => {
+          if (userDirectory.type !== backend.AssetType.directory) {
+            return null
+          } else {
+            const otherUser = usersById.get(userDirectory.id)
+            return !otherUser || otherUser.userId === user.userId ?
+                null
+              : <CategorySwitcherItem
+                  key={otherUser.userId}
+                  {...itemProps}
+                  isNested
+                  category={{
+                    type: 'user',
+                    rootPath: backend.Path(`enso://Users/${otherUser.name}`),
+                    homeDirectoryId: userDirectory.id,
+                  }}
+                  icon={PersonIcon}
+                  label={getText('userCategory', otherUser.name)}
+                  buttonLabel={getText('userCategoryButtonLabel', otherUser.name)}
+                  dropZoneLabel={getText('userCategoryDropZoneLabel', otherUser.name)}
+                />
+          }
+        })}
+        {teamsDirectoryQuery.data?.map((teamDirectory) => {
+          if (teamDirectory.type !== backend.AssetType.directory) {
+            return null
+          } else {
+            const team = teamsById.get(teamDirectory.id)
+            return !team ? null : (
+                <CategorySwitcherItem
+                  key={team.id}
+                  {...itemProps}
+                  isNested
+                  category={{
+                    type: 'team',
+                    team,
+                    rootPath: backend.Path(`enso://Teams/${team.groupName}`),
+                    homeDirectoryId: teamDirectory.id,
+                  }}
+                  icon={PeopleIcon}
+                  label={getText('teamCategory', team.groupName)}
+                  buttonLabel={getText('teamCategoryButtonLabel', team.groupName)}
+                  dropZoneLabel={getText('teamCategoryDropZoneLabel', team.groupName)}
+                />
+              )
+          }
+        })}
+        {localBackend && (
+          <div className="group flex items-center justify-between self-stretch">
             <CategorySwitcherItem
               {...itemProps}
-              category={{ type: 'cloud' }}
-              icon={CloudIcon}
-              label={getText('cloudCategory')}
-              buttonLabel={getText('cloudCategoryButtonLabel')}
-              dropZoneLabel={getText('cloudCategoryDropZoneLabel')}
+              category={{ type: 'local' }}
+              icon={ComputerIcon}
+              label={getText('localCategory')}
+              buttonLabel={getText('localCategoryButtonLabel')}
+              dropZoneLabel={getText('localCategoryDropZoneLabel')}
             />
-            {(user.plan === backend.Plan.team || user.plan === backend.Plan.enterprise) && (
+            <ariaComponents.Button
+              size="medium"
+              variant="icon"
+              icon={SettingsIcon}
+              aria-label={getText('changeLocalRootDirectoryInSettings')}
+              className="opacity-0 transition-opacity group-hover:opacity-100"
+              onPress={() => {
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                setSearchParams({ 'cloud-ide_SettingsTab': '"local"' })
+                setPage(TabType.settings)
+              }}
+            />
+          </div>
+        )}
+        {localBackend &&
+          localRootDirectories?.map((directory) => (
+            <div key={directory} className="group flex items-center self-stretch">
               <CategorySwitcherItem
                 {...itemProps}
                 isNested
                 category={{
-                  type: 'user',
-                  rootPath: backend.Path(`enso://Users/${user.name}`),
-                  homeDirectoryId: selfDirectoryId,
+                  type: 'local-directory',
+                  rootPath: backend.Path(directory),
+                  homeDirectoryId: newDirectoryId(backend.Path(directory)),
                 }}
-                icon={PersonIcon}
-                label={getText('myFilesCategory')}
-                buttonLabel={getText('myFilesCategoryButtonLabel')}
-                dropZoneLabel={getText('myFilesCategoryDropZoneLabel')}
+                icon={FolderIcon}
+                label={getFileName(directory)}
+                buttonLabel={getText('localCategoryButtonLabel')}
+                dropZoneLabel={getText('localCategoryDropZoneLabel')}
               />
-            )}
-            <CategorySwitcherItem
-              {...itemProps}
-              isNested
-              category={{ type: 'recent' }}
-              icon={RecentIcon}
-              label={getText('recentCategory')}
-              buttonLabel={getText('recentCategoryButtonLabel')}
-              dropZoneLabel={getText('recentCategoryDropZoneLabel')}
-              iconClassName="-ml-0.5"
-            />
-            <CategorySwitcherItem
-              {...itemProps}
-              isNested
-              category={{ type: 'trash' }}
-              icon={Trash2Icon}
-              label={getText('trashCategory')}
-              buttonLabel={getText('trashCategoryButtonLabel')}
-              dropZoneLabel={getText('trashCategoryDropZoneLabel')}
-            />
-            {usersDirectoryQuery.data?.map((userDirectory) => {
-              if (userDirectory.type !== backend.AssetType.directory) {
-                return null
-              } else {
-                const otherUser = usersById.get(userDirectory.id)
-                return !otherUser || otherUser.userId === user.userId ?
-                    null
-                  : <CategorySwitcherItem
-                      key={otherUser.userId}
-                      {...itemProps}
-                      isNested
-                      category={{
-                        type: 'user',
-                        rootPath: backend.Path(`enso://Users/${otherUser.name}`),
-                        homeDirectoryId: userDirectory.id,
+              <div className="grow" />
+              <ariaComponents.Button
+                size="medium"
+                variant="icon"
+                icon={Minus2Icon}
+                aria-label={getText('removeDirectoryFromFavorites')}
+                className="hidden group-hover:block"
+                onPress={() => {
+                  setModal(
+                    <ConfirmDeleteModal
+                      actionText={getText(
+                        'removeTheLocalDirectoryXFromFavorites',
+                        getFileName(directory),
+                      )}
+                      actionButtonLabel={getText('remove')}
+                      doDelete={() => {
+                        setLocalRootDirectories(
+                          localRootDirectories.filter(
+                            (otherDirectory) => otherDirectory !== directory,
+                          ),
+                        )
                       }}
-                      icon={PersonIcon}
-                      label={getText('userCategory', otherUser.name)}
-                      buttonLabel={getText('userCategoryButtonLabel', otherUser.name)}
-                      dropZoneLabel={getText('userCategoryDropZoneLabel', otherUser.name)}
-                    />
-              }
-            })}
-            {teamsDirectoryQuery.data?.map((teamDirectory) => {
-              if (teamDirectory.type !== backend.AssetType.directory) {
-                return null
-              } else {
-                const team = teamsById.get(teamDirectory.id)
-                return !team ? null : (
-                    <CategorySwitcherItem
-                      key={team.id}
-                      {...itemProps}
-                      isNested
-                      category={{
-                        type: 'team',
-                        team,
-                        rootPath: backend.Path(`enso://Teams/${team.groupName}`),
-                        homeDirectoryId: teamDirectory.id,
-                      }}
-                      icon={PeopleIcon}
-                      label={getText('teamCategory', team.groupName)}
-                      buttonLabel={getText('teamCategoryButtonLabel', team.groupName)}
-                      dropZoneLabel={getText('teamCategoryDropZoneLabel', team.groupName)}
-                    />
+                    />,
                   )
-              }
-            })}
-            {localBackend && (
-              <div className="group flex items-center justify-between self-stretch">
-                <CategorySwitcherItem
-                  {...itemProps}
-                  category={{ type: 'local' }}
-                  icon={ComputerIcon}
-                  label={getText('localCategory')}
-                  buttonLabel={getText('localCategoryButtonLabel')}
-                  dropZoneLabel={getText('localCategoryDropZoneLabel')}
-                />
-                <ariaComponents.Button
-                  size="medium"
-                  variant="icon"
-                  icon={SettingsIcon}
-                  aria-label={getText('changeLocalRootDirectoryInSettings')}
-                  className="opacity-0 transition-opacity group-hover:opacity-100"
-                  onPress={() => {
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
-                    setSearchParams({ 'cloud-ide_SettingsTab': '"local"' })
-                    setPage(TabType.settings)
-                  }}
-                />
-              </div>
-            )}
-            {localBackend &&
-              localRootDirectories?.map((directory) => (
-                <div key={directory} className="group flex items-center self-stretch">
-                  <CategorySwitcherItem
-                    {...itemProps}
-                    isNested
-                    category={{
-                      type: 'local-directory',
-                      rootPath: backend.Path(directory),
-                      homeDirectoryId: newDirectoryId(backend.Path(directory)),
-                    }}
-                    icon={FolderIcon}
-                    label={getFileName(directory)}
-                    buttonLabel={getText('localCategoryButtonLabel')}
-                    dropZoneLabel={getText('localCategoryDropZoneLabel')}
-                  />
-                  <div className="grow" />
-                  <ariaComponents.Button
-                    size="medium"
-                    variant="icon"
-                    icon={Minus2Icon}
-                    aria-label={getText('removeDirectoryFromFavorites')}
-                    className="hidden group-hover:block"
-                    onPress={() => {
-                      setModal(
-                        <ConfirmDeleteModal
-                          actionText={getText(
-                            'removeTheLocalDirectoryXFromFavorites',
-                            getFileName(directory),
-                          )}
-                          actionButtonLabel={getText('remove')}
-                          doDelete={() => {
-                            setLocalRootDirectories(
-                              localRootDirectories.filter(
-                                (otherDirectory) => otherDirectory !== directory,
-                              ),
-                            )
-                          }}
-                        />,
-                      )
-                    }}
-                  />
-                </div>
-              ))}
-            {localBackend && window.fileBrowserApi && (
-              <div className="flex">
-                <div className="ml-[15px] mr-1 border-r border-primary/20" />
-                <ariaComponents.Button
-                  size="xsmall"
-                  variant="outline"
-                  icon={PlusIcon}
-                  loaderPosition="icon"
-                  className="ml-0.5 rounded-full px-2 selectable"
-                  onPress={async () => {
-                    const [newDirectory] =
-                      (await window.fileBrowserApi?.openFileBrowser('directory')) ?? []
-                    if (newDirectory != null) {
-                      setLocalRootDirectories([...(localRootDirectories ?? []), newDirectory])
-                    }
-                  }}
-                >
-                  <div className="ml-1.5">{getText('addLocalDirectory')}</div>
-                </ariaComponents.Button>
-              </div>
-            )}
+                }}
+              />
+            </div>
+          ))}
+        {localBackend && window.fileBrowserApi && (
+          <div className="flex">
+            <div className="ml-[15px] mr-1 border-r border-primary/20" />
+            <ariaComponents.Button
+              size="xsmall"
+              variant="outline"
+              icon={PlusIcon}
+              loaderPosition="icon"
+              className="ml-0.5 rounded-full px-2 selectable"
+              onPress={async () => {
+                const [newDirectory] =
+                  (await window.fileBrowserApi?.openFileBrowser('directory')) ?? []
+                if (newDirectory != null) {
+                  setLocalRootDirectories([...(localRootDirectories ?? []), newDirectory])
+                }
+              }}
+            >
+              <div className="ml-1.5">{getText('addLocalDirectory')}</div>
+            </ariaComponents.Button>
           </div>
-        </div>
-      )}
-    </FocusArea>
+        )}
+      </div>
+    </div>
   )
 }

app/dashboard/src/pages/dashboard/Dashboard.tsx

@@ -121,12 +121,7 @@ function DashboardInner(props: DashboardProps) {
 
   const [category, setCategory] = searchParamsState.useSearchParamsState<categoryModule.Category>(
     'driveCategory',
-    () => {
-      const shouldDefaultToCloud =
-        initialLocalProjectId == null && (user.isEnabled || localBackend == null)
-      const type = shouldDefaultToCloud ? 'cloud' : 'local'
-      return { type }
-    },
+    () => (localBackend != null ? { type: 'local' } : { type: 'cloud' }),
     (value): value is categoryModule.Category =>
       categoryModule.CATEGORY_SCHEMA.safeParse(value).success,
   )

app/dashboard/src/tailwind.css

@@ -7,6 +7,19 @@
 @tailwind utilities;
 
 :root {
+  --color-primary-rgb: 0 0 0;
+  --color-primary-opacity: 60%;
+  --color-primary: rgb(var(--color-primary-rgb) / var(--color-primary-opacity));
+  --color-accent-rgb: 73 159 75;
+  --color-accent-opacity: 100%;
+  --color-accent: rgb(var(--color-accent-rgb) / var(--color-accent-opacity));
+  --color-danger-rgb: 211 59 11;
+  --color-danger-opacity: 100%;
+  --color-danger: rgb(var(--color-danger-rgb) / var(--color-danger-opacity));
+  --color-invert-rgb: 255 255 255;
+  --color-invert-opacity: 100%;
+  --color-invert: rgb(var(--color-invert-rgb) / var(--color-invert-opacity));
+
   --top-bar-height: 3rem;
   --row-height: 2rem;
   --table-row-height: 2.3125rem;

app/dashboard/tailwind.config.js

@@ -17,9 +17,10 @@ export default /** @satisfies {import('tailwindcss').Config} */ ({
         // modified.
         /** The default color of all text. */
         // This should be named "regular".
-        primary: 'rgb(0 0 0 / 60%)',
-        invert: 'rgb(255 255 255 / 80%)',
-        accent: '#499f4b',
+        primary: 'rgb(var(--color-primary-rgb) / var(--color-primary-opacity))',
+        invert: 'rgb(var(--color-invert-rgb) / var(--color-invert-opacity))',
+        accent: 'rgb(var(--color-accent-rgb) / 100%)',
+        danger: 'rgb(var(--color-danger-rgb) / 100%)',
         'accent-dark': '#3e9152',
         'hover-bg': 'rgb(0 0 0 / 10%)',
         frame: 'rgb(255 255 255 / 40%)',
@@ -38,7 +39,6 @@ export default /** @satisfies {import('tailwindcss').Config} */ ({
         v3: '#252423',
         youtube: '#c62421',
         discord: '#404796',
-        danger: '#d33b0b',
         'selection-brush': 'lch(70% 0 0 / 50%)',
         dim: 'rgb(0 0 0 / 25%)',
         'dim-darker': 'rgb(0 0 0 / 40%)',

app/ide-desktop/common/src/text/english.json

@@ -296,6 +296,7 @@
   "teamCategoryButtonLabel": "$0 (Team)",
   "localCategoryButtonLabel": "Local",
   "cloudCategoryDropZoneLabel": "Move to your organization's home directory",
+  "cloudCategoryBadgeContent": "Beta",
   "myFilesCategoryDropZoneLabel": "Move to your home directory",
   "recentCategoryDropZoneLabel": "Move to Recent category",
   "trashCategoryDropZoneLabel": "Move to Trash category",