Home screen (#7517)

- Closes enso-org/cloud-v2#580
- Adds home screen

Other changes:
- Typing in the search bar from the home page, switches to the drive page. This is easy to change/remove, of course

# Important Notes
There are minor differences from the design:
- The Enso logo has opacity 0.6 to match the text color, rather than 0.665
- The list of samples is different
- The border-radius on the "create empty project" tile was changed from 18px to 16px, to match every other border-radius (especially the ones on the tiles for the other samples)

Implementation notes:
- The "new project" circled plus icon has a different color to the primary text color as well, but that has been left as-is
- The sample descriptions have a backdrop-blur, but the background image no longer extends underneath it
- There are currently no inset shadows for the home screen, but it will be easy to copy them from the old implementation from the old templates list
- "Read what's new in Enso 3.0 Beta" currently links to https://enso.org/, rather than a blog post (which does not yet exist)
- The new template backgrounds have been replaced with SVGs. The Excel one uses the Excel logo from Wikipedia; the new geospatial analysis one was converted to SVG via auto-tracing.

There are also several placeholders:
- Sample author icon
- Sample author
- Sample open count
- Sample like ount

app/ide-desktop/lib/client/src/security.ts

@@ -20,7 +20,7 @@ const TRUSTED_HOSTS = [
 ]
 
 /** The list of hosts that the app can open external links to. */
-const TRUSTED_EXTERNAL_HOSTS = ['discord.gg']
+const TRUSTED_EXTERNAL_HOSTS = ['enso.org', 'www.youtube.com', 'discord.gg', 'github.com']
 
 /** The list of URLs a new WebView can be pointed to. */
 const WEBVIEW_URL_WHITELIST: string[] = []

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

@@ -55,39 +55,19 @@ function esbuildPluginGenerateTailwind(): esbuild.Plugin {
     return {
         name: 'enso-generate-tailwind',
         setup: build => {
-            /** An entry in the cache of already processed CSS files. */
-            interface CacheEntry {
-                contents: string
-                lastModified: number
-            }
-            const cachedOutput: Record<string, CacheEntry> = {}
-            let tailwindConfigLastModified = 0
-            let tailwindConfigWasModified = true
             const cssProcessor = postcss([
                 tailwindcss({
                     config: TAILWIND_CONFIG_PATH,
                 }),
                 tailwindcssNesting(),
             ])
-            build.onStart(async () => {
-                const tailwindConfigNewLastModified = (await fs.stat(TAILWIND_CONFIG_PATH)).mtimeMs
-                tailwindConfigWasModified =
-                    tailwindConfigLastModified !== tailwindConfigNewLastModified
-                tailwindConfigLastModified = tailwindConfigNewLastModified
-            })
             build.onLoad({ filter: /tailwind\.css$/ }, async loadArgs => {
-                const lastModified = (await fs.stat(loadArgs.path)).mtimeMs
-                let output = cachedOutput[loadArgs.path]
-                if (!output || output.lastModified !== lastModified || tailwindConfigWasModified) {
-                    console.log(`Processing CSS file '${loadArgs.path}'.`)
-                    const content = await fs.readFile(loadArgs.path, 'utf8')
-                    const result = await cssProcessor.process(content, { from: loadArgs.path })
-                    console.log(`Processed CSS file '${loadArgs.path}'.`)
-                    output = { contents: result.css, lastModified }
-                    cachedOutput[loadArgs.path] = output
-                }
+                console.log(`Processing CSS file '${loadArgs.path}'.`)
+                const content = await fs.readFile(loadArgs.path, 'utf8')
+                const result = await cssProcessor.process(content, { from: loadArgs.path })
+                console.log(`Processed CSS file '${loadArgs.path}'.`)
                 return {
-                    contents: output.contents,
+                    contents: result.content,
                     loader: 'css',
                     watchFiles: [loadArgs.path, TAILWIND_CONFIG_PATH],
                 }

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

@@ -2,8 +2,6 @@
  * interactive components. */
 import * as React from 'react'
 
-import * as common from 'enso-common'
-
 import * as assetEventModule from '../events/assetEvent'
 import * as assetListEventModule from '../events/assetListEvent'
 import * as backendModule from '../backend'
@@ -22,13 +20,12 @@ import * as loggerProvider from '../../providers/logger'
 import * as modalProvider from '../../providers/modal'
 import * as shortcutsProvider from '../../providers/shortcuts'
 
-import * as app from '../../components/app'
 import * as pageSwitcher from './pageSwitcher'
 import * as spinner from './spinner'
 import Chat, * as chat from './chat'
-import DriveView from './driveView'
+import Drive from './drive'
 import Editor from './editor'
-import Templates from './templates'
+import Home from './home'
 import TheModal from './theModal'
 import TopBar from './topBar'
 
@@ -48,7 +45,6 @@ export interface DashboardProps {
 /** The component that contains the entire UI. */
 export default function Dashboard(props: DashboardProps) {
     const { supportsLocalBackend, appRunner, initialProjectName, projectManagerUrl } = props
-    const navigate = hooks.useNavigate()
     const logger = loggerProvider.useLogger()
     const session = authProvider.useNonPartialUserSession()
     const { backend } = backendProvider.useBackend()
@@ -97,6 +93,12 @@ export default function Dashboard(props: DashboardProps) {
         }
     }, [page, /* should never change */ unsetModal])
 
+    React.useEffect(() => {
+        if (query !== '') {
+            setPage(pageSwitcher.Page.drive)
+        }
+    }, [query])
+
     React.useEffect(() => {
         let currentBackend = backend
         if (
@@ -322,11 +324,10 @@ export default function Dashboard(props: DashboardProps) {
         )
     }, [])
 
-    const driveHiddenClass = page === pageSwitcher.Page.drive ? '' : 'hidden'
     return (
         <>
             <div
-                className={`flex flex-col gap-2 relative select-none text-primary text-xs h-screen pb-2 ${
+                className={`flex flex-col relative select-none text-primary text-xs h-screen pb-2 ${
                     page === pageSwitcher.Page.editor ? 'cursor-none pointer-events-none' : ''
                 }`}
                 onContextMenu={event => {
@@ -363,65 +364,27 @@ export default function Dashboard(props: DashboardProps) {
                         setProjectStartupInfo(null)
                     }}
                 />
-                {isListingRemoteDirectoryWhileOffline ? (
-                    <div className={`grow grid place-items-center mx-2 ${driveHiddenClass}`}>
-                        <div className="flex flex-col gap-4">
-                            <div className="text-base text-center">You are not signed in.</div>
-                            <button
-                                className="text-base text-white bg-help rounded-full self-center leading-170 h-8 py-px w-16"
-                                onClick={() => {
-                                    navigate(app.LOGIN_PATH)
-                                }}
-                            >
-                                Login
-                            </button>
-                        </div>
-                    </div>
-                ) : isListingLocalDirectoryAndWillFail ? (
-                    <div className={`grow grid place-items-center mx-2 ${driveHiddenClass}`}>
-                        <div className="text-base text-center">
-                            Could not connect to the Project Manager. Please try restarting{' '}
-                            {common.PRODUCT_NAME}, or manually launching the Project Manager.
-                        </div>
-                    </div>
-                ) : isListingRemoteDirectoryAndWillFail ? (
-                    <div className={`grow grid place-items-center mx-2 ${driveHiddenClass}`}>
-                        <div className="text-base text-center">
-                            We will review your user details and enable the cloud experience for you
-                            shortly.
-                        </div>
-                    </div>
-                ) : (
-                    <>
-                        <Templates
-                            hidden={page !== pageSwitcher.Page.drive}
-                            onTemplateClick={doCreateProject}
-                        />
-                        <DriveView
-                            hidden={page !== pageSwitcher.Page.drive}
-                            page={page}
-                            initialProjectName={initialProjectName}
-                            query={query}
-                            projectStartupInfo={projectStartupInfo}
-                            queuedAssetEvents={queuedAssetEvents}
-                            assetListEvents={assetListEvents}
-                            dispatchAssetListEvent={dispatchAssetListEvent}
-                            assetEvents={assetEvents}
-                            dispatchAssetEvent={dispatchAssetEvent}
-                            doCreateProject={doCreateProject}
-                            doOpenEditor={openEditor}
-                            doCloseEditor={closeEditor}
-                            loadingProjectManagerDidFail={loadingProjectManagerDidFail}
-                            isListingRemoteDirectoryWhileOffline={
-                                isListingRemoteDirectoryWhileOffline
-                            }
-                            isListingLocalDirectoryAndWillFail={isListingLocalDirectoryAndWillFail}
-                            isListingRemoteDirectoryAndWillFail={
-                                isListingRemoteDirectoryAndWillFail
-                            }
-                        />
-                    </>
-                )}
+                <Home hidden={page !== pageSwitcher.Page.home} onTemplateClick={doCreateProject} />
+                <Drive
+                    hidden={page !== pageSwitcher.Page.drive}
+                    page={page}
+                    initialProjectName={initialProjectName}
+                    query={query}
+                    projectStartupInfo={projectStartupInfo}
+                    queuedAssetEvents={queuedAssetEvents}
+                    assetListEvents={assetListEvents}
+                    dispatchAssetListEvent={dispatchAssetListEvent}
+                    assetEvents={assetEvents}
+                    dispatchAssetEvent={dispatchAssetEvent}
+                    doCreateProject={doCreateProject}
+                    doOpenEditor={openEditor}
+                    doCloseEditor={closeEditor}
+                    loadingProjectManagerDidFail={loadingProjectManagerDidFail}
+                    isListingRemoteDirectoryWhileOffline={isListingRemoteDirectoryWhileOffline}
+                    isListingLocalDirectoryAndWillFail={isListingLocalDirectoryAndWillFail}
+                    isListingRemoteDirectoryAndWillFail={isListingRemoteDirectoryAndWillFail}
+                />
+                <TheModal />
                 <Editor
                     hidden={page !== pageSwitcher.Page.editor}
                     supportsLocalBackend={supportsLocalBackend}