Add category switcher

app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/button.tsx

@@ -30,9 +30,9 @@ export default function Button(props: ButtonProps) {
         <SvgMask
             src={image}
             {...(disabled && error != null ? { title: error } : {})}
-            className={`${active && !disabled ? '' : disabledOpacityClassName ?? 'opacity-50'} ${
-                !disabled ? 'cursor-pointer hover:opacity-100 cursor-pointer' : 'cursor-not-allowed'
-            } ${className ?? ''}`}
+            className={`${active ? '' : disabledOpacityClassName ?? 'opacity-50'} ${
+                disabled ? '' : 'cursor-pointer hover:opacity-100'
+            } ${!active && disabled ? 'cursor-not-allowed' : ''} ${className ?? ''}`}
             {...(disabled ? {} : { onClick })}
         />
     )

app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/categorySwitcher.tsx

@@ -0,0 +1,113 @@
+/** @file Switcher to choose the currently visible assets table category. */
+import * as React from 'react'
+
+import Home2Icon from 'enso-assets/home2.svg'
+import RecentIcon from 'enso-assets/recent.svg'
+import RootIcon from 'enso-assets/root.svg'
+import TempIcon from 'enso-assets/temp.svg'
+import Trash2Icon from 'enso-assets/trash2.svg'
+
+import SvgMask from '../../authentication/components/svgMask'
+
+// ============================
+// === CategorySwitcherItem ===
+// ============================
+
+/** Props for a {@link CategorySwitcherItem}. */
+interface InternalCategorySwitcherItemProps {
+    active?: boolean
+    disabled?: boolean
+    image: string
+    name: string
+    /** A title that is only shown when `disabled` is true. */
+    error?: string | null
+    iconClassName?: string
+    onClick: () => void
+}
+
+/** An entry in a {@link CategorySwitcher}. */
+function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
+    const { active = false, disabled = false, image, name, error, iconClassName, onClick } = props
+    return (
+        <div
+            {...(disabled && error != null ? { title: error } : {})}
+            className={`flex items-center rounded-full gap-2 h-8 px-2 ${
+                active ? 'bg-frame-selected' : 'text-not-selected'
+            } ${disabled ? '' : 'cursor-pointer hover:opacity-100'} ${
+                !active && disabled ? 'cursor-not-allowed' : ''
+            }`}
+            {...(disabled ? {} : { onClick })}
+        >
+            <SvgMask
+                src={image}
+                className={`${active ? 'text-icon-selected' : 'text-icon-not-selected'} ${
+                    iconClassName ?? ''
+                }`}
+            />
+            <span>{name}</span>
+        </div>
+    )
+}
+
+// ========================
+// === CategorySwitcher ===
+// ========================
+
+/** A switcher to choose the currently visible assets table category. */
+export default function CategorySwitcher() {
+    return (
+        <div className="flex flex-col items-start w-30">
+            <div className="pl-2 pb-1.5">
+                <span className="font-bold text-sm leading-144.5 h-6 py-0.5">Category</span>
+            </div>
+            <CategorySwitcherItem
+                disabled
+                image={RecentIcon}
+                name="Recent"
+                error="Not implemented yet."
+                iconClassName="-ml-0.5"
+                onClick={() => {
+                    // No backend support yet.
+                }}
+            />
+            <CategorySwitcherItem
+                disabled
+                image={TempIcon}
+                name="Drafts"
+                error="Not implemented yet."
+                iconClassName="-ml-0.5"
+                onClick={() => {
+                    // No backend support yet.
+                }}
+            />
+            <CategorySwitcherItem
+                active
+                disabled
+                image={Home2Icon}
+                name="Home"
+                onClick={() => {
+                    // Not implemented yet - waiting on implementation details to determine how to
+                    // switch back to the home category.
+                }}
+            />
+            <CategorySwitcherItem
+                disabled
+                image={RootIcon}
+                name="Root"
+                error="Not implemented yet."
+                onClick={() => {
+                    // No backend support yet.
+                }}
+            />
+            <CategorySwitcherItem
+                disabled
+                image={Trash2Icon}
+                name="Trash"
+                error="Not implemented yet."
+                onClick={() => {
+                    // No backend support yet.
+                }}
+            />
+        </div>
+    )
+}

app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveView.tsx

@@ -13,6 +13,7 @@ import * as string from '../../string'
 
 import * as pageSwitcher from './pageSwitcher'
 import AssetsTable from './assetsTable'
+import CategorySwitcher from './categorySwitcher'
 import DriveBar from './driveBar'
 
 // =================
@@ -218,6 +219,21 @@ export default function DriveView(props: DriveViewProps) {
         }
     }, [page])
 
+    const assetsTable = (
+        <AssetsTable
+            items={assets}
+            filter={assetFilter}
+            isLoading={isLoadingAssets}
+            appRunner={appRunner}
+            assetEvents={assetEvents}
+            dispatchAssetEvent={dispatchAssetEvent}
+            assetListEvents={assetListEvents}
+            dispatchAssetListEvent={dispatchAssetListEvent}
+            doOpenIde={doOpenEditor}
+            doCloseIde={doCloseEditor}
+        />
+    )
+
     return (
         <div
             className={`flex flex-col flex-1 overflow-hidden gap-2.5 px-3.25 ${
@@ -237,18 +253,16 @@ export default function DriveView(props: DriveViewProps) {
                     dispatchAssetEvent={dispatchAssetEvent}
                 />
             </div>
-            <AssetsTable
-                items={assets}
-                filter={assetFilter}
-                isLoading={isLoadingAssets}
-                appRunner={appRunner}
-                assetEvents={assetEvents}
-                dispatchAssetEvent={dispatchAssetEvent}
-                assetListEvents={assetListEvents}
-                dispatchAssetListEvent={dispatchAssetListEvent}
-                doOpenIde={doOpenEditor}
-                doCloseIde={doCloseEditor}
-            />
+            {backend.type === backendModule.BackendType.remote ? (
+                <div className="flex gap-3">
+                    <div className="flex flex-col gap-4">
+                        <CategorySwitcher />
+                    </div>
+                    {assetsTable}
+                </div>
+            ) : (
+                assetsTable
+            )}
             {isFileBeingDragged &&
             organization != null &&
             backend.type === backendModule.BackendType.remote ? (

app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/pageSwitcher.tsx

@@ -51,6 +51,7 @@ export default function PageSwitcher(props: PageSwitcherProps) {
         <div className="flex items-center shrink-0 gap-4">
             {PAGE_DATA.map(pageData => {
                 const isDisabled =
+                    pageData.page === page ||
                     pageData.page === Page.home ||
                     (pageData.page === Page.editor && isEditorDisabled)
                 return (

app/ide-desktop/lib/dashboard/tailwind.config.ts

@@ -19,7 +19,11 @@ export const theme = {
     extend: {
         colors: {
             /** The default color of all text. */
+            // This should be named "regular".
             primary: 'rgba(0, 0, 0, 0.60)',
+            'not-selected': 'rgba(0, 0, 0, 0.40)',
+            'icon-selected': 'rgba(0, 0, 0, 0.50)',
+            'icon-not-selected': 'rgba(0, 0, 0, 0.30)',
             chat: '#484848',
             'ide-bg': '#ebeef1',
             'ide-bg-dark': '#d0d3d6',