Draw: gallery empty state

src/apps/draw/DrawCreate.tsx

@@ -18,8 +18,8 @@ import { createDMessageDataRefDBlob } from '~/common/stores/chat/chat.message';
 import { DesignerPrompt, PromptComposer } from './create/PromptComposer';
 import { ProviderConfigure } from './create/ProviderConfigure';
 import { DrawSectionHeading } from './create/DrawSectionHeading';
-import { FallbackUnconfigured } from './create/FallbackUnconfigured';
-import { FallbackNoImages } from './create/FallbackNoImages';
+import { ZeroDrawConfig } from './create/ZeroDrawConfig';
+import { ZeroGenerations } from './create/ZeroGenerations';
 
 
 const imagineWorkspaceSx: SxProps = {
@@ -241,11 +241,11 @@ export function DrawCreate(props: {
           {/*  })}*/}
           {/*</Box>*/}
 
-          {/* Fallbac*/}
-          <FallbackNoImages />
+          {/* Fallback */}
+          <ZeroGenerations />
 
           {/* End with this Unconfigured message */}
-          {!props.mayWork && <FallbackUnconfigured />}
+          {!props.mayWork && <ZeroDrawConfig />}
 
 
           {/* Visibility and actions are handled via Context */}

src/apps/draw/DrawGallery.tsx

@@ -3,20 +3,16 @@ import { Box, Table } from '@mui/joy';
 
 import { DBlobAssetType, DBlobImageAsset } from '~/modules/dblobs/dblobs.types';
 import { useDBAssetsByScopeAndType } from '~/modules/dblobs/dblobs.hooks';
-
-import { AppPlaceholder } from '../AppPlaceholder';
+import { ZeroGallery } from './gallery/ZeroGallery';
 
 
-export function DrawGallery({ domain }: { domain: 'draw' | 'app' }) {
+export function DrawGallery(props: { domain: 'draw' | 'app' }) {
   const [items] = useDBAssetsByScopeAndType<DBlobImageAsset>(
     DBlobAssetType.IMAGE,
     'global',
-    domain === 'draw' ? 'app-draw' : 'app-chat',
+    props.domain === 'draw' ? 'app-draw' : 'app-chat',
   );
 
-  if (!items || items.length === 0) {
-    return <AppPlaceholder text={items === undefined ? 'Loading...' : 'No images found.'} />;
-  }
 
   const boxStyles = {
     flexGrow: 1,
@@ -40,7 +36,7 @@ export function DrawGallery({ domain }: { domain: 'draw' | 'app' }) {
         </tr>
         </thead>
         <tbody>
-        {items.map(({ id, label, cache, data, origin, metadata, createdAt, updatedAt }) => (
+        {(items || []).map(({ id, label, cache, data, origin, metadata, createdAt, updatedAt }) => (
           <tr key={id}>
             <td>
               <Box sx={cellStyles}>
@@ -75,6 +71,7 @@ export function DrawGallery({ domain }: { domain: 'draw' | 'app' }) {
         ))}
         </tbody>
       </Table>
+      {(!items || items.length === 0) && <ZeroGallery domain={props.domain} />}
     </Box>
   );
 }

src/apps/draw/create/ZeroDrawConfig.tsx

@@ -5,7 +5,7 @@ import { Button, Card, CardActions, CardContent, Typography } from '@mui/joy';
 import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 
-export function FallbackUnconfigured() {
+export function ZeroDrawConfig() {
 
   // external state
   const { openPreferencesTab } = useOptimaLayout();

src/apps/draw/create/ZeroGenerations.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Card, Typography } from '@mui/joy';
 
 
-export function FallbackNoImages() {
+export function ZeroGenerations() {
   return (
     <Card variant='soft' sx={{
       maxWidth: 'max(50%, 320px)',

src/apps/draw/gallery/ZeroGallery.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import { Card } from '@mui/joy';
+
+import { BlocksRenderer } from '~/modules/blocks/BlocksRenderer';
+
+
+const zeroGalleryMd = `
+### {{title}}
+
+You haven't created any images yet. To get started:
+
+- Use **/draw your idea** in the **Chat** application.
+- Open the **Draw** application to create images from text prompts.
+
+You can switch between **Gallery** and **App Media** in the top bar at any time.
+
+Your past creations will appear here once you start drawing. 
+`.trim();
+
+
+export function ZeroGallery(props: { domain: 'draw' | 'app' }) {
+  const text = zeroGalleryMd.replace('{{title}}', props.domain === 'draw'
+    ? 'Empty Gallery'
+    : 'No App Media',
+  );
+  return (
+    <Card variant='soft' sx={{
+      maxWidth: 'max(50%, 340px)',
+      mx: 'auto',
+      my: '2rem',
+      backgroundColor: 'background.surface',
+      borderRadius: 'lg',
+      boxShadow: 'lg',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1,
+    }}>
+      {/*<Typography level='h4'>*/}
+      {/*  {Brand.Title.Base} No Images */}
+      {/*</Typography>*/}
+      {/*<Typography level='title-sm' sx={{ whiteSpace: 'balance' }}>*/}
+      <BlocksRenderer
+        text={text}
+        fromRole='assistant'
+        contentScaling='sm'
+        fitScreen
+        renderTextAsMarkdown
+      />
+      {/*</Typography>*/}
+    </Card>
+  );
+}