Draw: renames

src/apps/draw/AppDraw.tsx

@@ -1,85 +1,49 @@
 import * as React from 'react';
 
-import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
-
 import { useIsMobile } from '~/common/components/useMatchMedia';
 import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
-import { useRouterQuery } from '~/common/app.routes';
-
-import { DrawHeading } from './components/DrawHeading';
-import { DrawUnconfigured } from './components/DrawUnconfigured';
-import { TextToImage } from './TextToImage';
-import { useDrawSectionDropdown } from './useDrawSectionDropdown';
+import { useDrawSectionDropdown } from './create/useDrawSectionDropdown';
+import { DrawGallery } from './DrawGallery';
+import { DrawCreate } from './DrawCreate';
 
 
-export interface AppDrawIntent {
-  backTo: 'app-chat';
-}
+// export interface AppDrawIntent {
+//   backTo: 'app-chat';
+// }
 
 
 export function AppDraw() {
 
   // state
-  const [showHeading, setShowHeading] = React.useState<boolean>(true);
-  const [_drawIntent, setDrawIntent] = React.useState<AppDrawIntent | null>(null);
-  const [section, setSection] = React.useState<number>(0);
   const { drawSection, drawSectionDropdown } = useDrawSectionDropdown();
-
+  // const [_drawIntent, setDrawIntent] = React.useState<AppDrawIntent | null>(null);
 
   // external state
   const isMobile = useIsMobile();
-  const query = useRouterQuery<Partial<AppDrawIntent>>();
-  const { activeProviderId, mayWork, providers, setActiveProviderId } = useCapabilityTextToImage();
-
+  // const query = useRouterQuery<Partial<AppDrawIntent>>();
 
   // [effect] set intent from the query parameters
-  React.useEffect(() => {
-    if (query.backTo) {
-      setDrawIntent({
-        backTo: query.backTo || 'app-chat',
-      });
-    }
-  }, [query]);
-
+  // React.useEffect(() => {
+  //   if (query.backTo) {
+  //     setDrawIntent({
+  //       backTo: query.backTo || 'app-chat',
+  //     });
+  //   }
+  // }, [query]);
   // const hasIntent = !!drawIntent && !!drawIntent.backTo;
 
+
+  // pluggable layout
   usePluggableOptimaLayout(null, drawSectionDropdown, null, 'aa');
 
   switch (drawSection) {
     case 'create':
-      return <>
-
-        {/* The container is a 100dvh, flex column with App bg (see `pageCoreSx`) */}
-        {showHeading && <DrawHeading
-          section={section}
-          setSection={setSection}
-          showSections
-          onRemoveHeading={() => setShowHeading(false)}
-          sx={{
-            px: { xs: 1, md: 2 },
-            py: { xs: 1, md: 6 },
-          }}
-        />}
-
-        {!mayWork && <DrawUnconfigured />}
-
-        {/*{mayWork && <Gallery />}*/}
-
-        {mayWork && (
-          <TextToImage
-            isMobile={isMobile}
-            providers={providers}
-            activeProviderId={activeProviderId}
-            setActiveProviderId={setActiveProviderId}
-          />
-        )}
-
-      </>;
+      return <DrawCreate isMobile={isMobile} />;
 
     case 'browse':
-      return <>Browse</>;
+      return <DrawGallery domain='draw' />;
 
     case 'media':
-      return <>App Media</>;
+      return <DrawGallery domain='app' />;
   }
 }

src/apps/draw/DrawCreate.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';
+
+import { DrawHeading } from './create/DrawHeading';
+import { DrawUnconfigured } from './create/DrawUnconfigured';
+import { TextToImage } from './create/TextToImage';
+
+
+export function DrawCreate(props: {
+  isMobile: boolean
+}) {
+
+  // stateo
+  const [showHeading, setShowHeading] = React.useState<boolean>(true);
+  const [section, setSection] = React.useState<number>(0);
+
+  // external state
+  const { activeProviderId, mayWork, providers, setActiveProviderId } = useCapabilityTextToImage();
+
+  return <>
+
+    {/* The container is a 100dvh, flex column with App bg (see `pageCoreSx`) */}
+    {showHeading && <DrawHeading
+      section={section}
+      setSection={setSection}
+      showSections
+      onRemoveHeading={() => setShowHeading(false)}
+      sx={{
+        px: { xs: 1, md: 2 },
+        py: { xs: 1, md: 6 },
+      }}
+    />}
+
+    {!mayWork && <DrawUnconfigured />}
+
+    {/*{mayWork && <Gallery />}*/}
+
+    {mayWork && (
+      <TextToImage
+        isMobile={props.isMobile}
+        providers={providers}
+        activeProviderId={activeProviderId}
+        setActiveProviderId={setActiveProviderId}
+      />
+    )}
+
+  </>;
+}

src/apps/draw/DrawGallery.tsx

@@ -1,7 +1,9 @@
-import { AppPlaceholder } from '../AppPlaceholder';
 import * as React from 'react';
 
-export function Gallery() {
+import { AppPlaceholder } from '../AppPlaceholder';
+
+
+export function DrawGallery(props: { domain: 'draw' | 'app' }) {
   return (
 
     <AppPlaceholder text='Drawing App is under development. v1.16.' />

src/apps/draw/create/PromptDesigner.tsx

@@ -19,7 +19,7 @@ import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 import { ButtonPromptFromIdea } from './ButtonPromptFromIdea';
 import { ButtonPromptFromX } from './ButtonPromptFromX';
-import { useDrawIdeas } from '../state/useDrawIdeas';
+import { useDrawIdeas } from './useDrawIdeas';
 
 
 const promptButtonClass = 'PromptDesigner-button';

src/apps/draw/create/TextToImage.tsx

@@ -14,8 +14,8 @@ import { InlineError } from '~/common/components/InlineError';
 import { createDMessageDataRefDBlob } from '~/common/stores/chat/chat.message';
 import { themeBgAppChatComposer } from '~/common/app.theme';
 
-import { DesignerPrompt, PromptDesigner } from './components/PromptDesigner';
-import { ProviderConfigure } from './components/ProviderConfigure';
+import { DesignerPrompt, PromptDesigner } from './PromptDesigner';
+import { ProviderConfigure } from './ProviderConfigure';
 
 
 const STILL_LAYOUTING = false;

src/apps/draw/create/useDrawSectionDropdown.tsx

@@ -14,7 +14,7 @@ const drawDropdownItems: DropdownItems = {
     title: 'Create Image',
   },
   browse: {
-    title: 'Gallery',
+    title: 'View Gallery',
   },
   media: {
     title: 'App Media',