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,9 +360,7 @@ export default function CategorySwitcher(props: CategorySwitcherProps) {
   )
 
   return (
-    <FocusArea direction="vertical">
-      {(innerProps) => (
-        <div className="flex flex-col gap-2 py-1" {...innerProps}>
+    <div className="flex flex-col gap-2 py-1">
       <ariaComponents.Text variant="subtitle" className="px-2 font-bold">
         {getText('category')}
       </ariaComponents.Text>
@@ -373,6 +377,7 @@ export default function CategorySwitcher(props: CategorySwitcherProps) {
           label={getText('cloudCategory')}
           buttonLabel={getText('cloudCategoryButtonLabel')}
           dropZoneLabel={getText('cloudCategoryDropZoneLabel')}
+          badgeContent={getText('cloudCategoryBadgeContent')}
         />
         {(user.plan === backend.Plan.team || user.plan === backend.Plan.enterprise) && (
           <CategorySwitcherItem
@@ -546,7 +551,5 @@ export default function CategorySwitcher(props: CategorySwitcherProps) {
         )}
       </div>
     </div>
-      )}
-    </FocusArea>
   )
 }

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",