F-composites-bufan

packages/client/dashboard/src/App.tsx

@@ -36,7 +36,7 @@ import NoMatch from './container/NoMatch'
 
 import Header from './components/nav/Header'
 import Nav from './components/nav/Nav'
-import ModelList from './components/model/ModelList'
+import DappModelAndComposites from './components/model/DappModelAndComposites'
 import ExploreComposite from './container/ExploreComposite'
 
 dayjs.extend(relativeTime)
@@ -182,7 +182,7 @@ function ModelEditorLayout () {
 
   return (
     <EditorLayoutContainer>
-      <ModelList
+      <DappModelAndComposites
         selectModel={selectModel}
         setSelectModel={data => {
           setSelectModel(data)

packages/client/dashboard/src/components/model/CodeDownload.tsx

@@ -1,7 +1,7 @@
 import FileSaver from 'file-saver'
 import { useState } from 'react'
 import styled from 'styled-components'
-import ChevronDown from '../icons/CheckronDown'
+import ChevronDown from '../icons/ChevronDown'
 import DownloadIcon from '../icons/DownloadIcon'
 import { Code } from './ModelSDK'
 

packages/client/dashboard/src/components/model/CreateCompositeModal.tsx → packages/client/dashboard/src/components/model/CreateNewComposite.tsx

@@ -11,7 +11,7 @@ import { createCompositeFromBrowser } from '../../utils/composeDBUtils'
 import { useCeramicNodeCtx } from '../../context/CeramicNodeCtx'
 import { startIndexModels } from '../../api/model'
 
-export default function CreateCompositeModal ({
+export default function CreateNewComposite ({
   closeModal,
   loadDappComposites,
   defaultName,

packages/client/dashboard/src/components/model/ModelList.tsx → packages/client/dashboard/src/components/model/DappModelAndComposites.tsx

@@ -11,11 +11,11 @@ import {
   ModalOverlay,
   Popover
 } from 'react-aria-components'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 import { deleteDappComposites, getDappComposites } from '../../api/composite'
 import { updateDapp } from '../../api/dapp'
-import { getDappModels, getModelsInfoByIds } from '../../api/model'
+import { getModelsInfoByIds } from '../../api/model'
 import { useAppCtx } from '../../context/AppCtx'
 import { useCeramicNodeCtx } from '../../context/CeramicNodeCtx'
 import useIsOwner from '../../hooks/useIsOwner'
@@ -26,29 +26,31 @@ import {
   ModelStream,
   Network
 } from '../../types.d'
+import { getCompositeDefaultSchema } from '../../utils/composedb-types/schemas'
 import { shortPubKey } from '../../utils/shortPubKey'
 import CopyTint from '../common/CopyTint'
 import MergeIcon from '../icons/MergeIcon'
 import PlusIcon from '../icons/PlusIcon'
 import TrashIcon from '../icons/TrashIcon'
 import NoCeramicNodeModal from '../node/NoCeramicNodeModal'
-import CreateCompositeModal from './CreateCompositeModal'
+import CreateNewComposite from './CreateNewComposite'
 import CreateNewModel from './CreateNewModel'
-import FavoriteModel from './FavoriteModal'
 import MergeModal from './MergeModal'
-import { getCompositeDefaultSchema } from '../../utils/composedb-types/schemas'
+import CloseIcon from '../icons/CloseIcon'
+import ModelList from './ExploreModelList'
+import { CompositeList } from './ExploreCompositeList'
 
 enum OPEN_MODAL {
   NONE,
   CREATE_NEW_MODEL,
   ADD_FROM_ALL_MODELS,
   ADD_FROM_FAVORITE_MODELS,
   CREATE_NEW_COMPOSITE,
-  ADD_FROM_ALL_COMPOSITES,
-  ADD_FROM_FAVORITE_COMPOSITES
+  ADD_FROM_ALL_COMPOSITES
+  // ADD_FROM_FAVORITE_COMPOSITES
 }
 
-export default function ModelList ({
+export default function DappModelAndComposites ({
   editable,
   selectComposite,
   setSelectComposite,
@@ -66,7 +68,6 @@ export default function ModelList ({
   const { loadDapps, currDapp } = useAppCtx()
   const { appId, selectedDapp } = useSelectedDapp()
   const { currCeramicNode } = useCeramicNodeCtx()
-  const navigate = useNavigate()
   const [loading, setLoading] = useState(false)
   const [dappModels, setDappModels] = useState<ModelStream[]>()
   const [dappComposites, setDappComposites] = useState<DappCompositeDto[]>([])
@@ -200,16 +201,16 @@ export default function ModelList ({
   const [openModal, setOpenModal] = useState(OPEN_MODAL.NONE)
   if (loading) {
     return (
-      <ListBox>
+      <Box>
         <div className='loading'>
           <img src='/loading.gif' alt='' />
         </div>
-      </ListBox>
+      </Box>
     )
   }
 
   return (
-    <ListBox>
+    <Box>
       <div className='title'>
         <h3>Models</h3>
         {editable &&
@@ -237,7 +238,7 @@ export default function ModelList ({
                 <Menu
                   onAction={id => {
                     if (id === 'explore') {
-                      navigate(`/dapp/${appId}/explore/model`)
+                      setOpenModal(OPEN_MODAL.ADD_FROM_ALL_MODELS)
                       return
                     }
                     if (id === 'favorite') {
@@ -250,7 +251,7 @@ export default function ModelList ({
                     }
                   }}
                 >
-                  <MenuItem id='explore'>Explore Models</MenuItem>
+                  <MenuItem id='explore'>Add From Popular Models</MenuItem>
                   <MenuItem id='favorite'>Add From Favorite</MenuItem>
                   <MenuItem id='create'>Create New Model</MenuItem>
                 </Menu>
@@ -308,7 +309,7 @@ export default function ModelList ({
                     <Menu
                       onAction={id => {
                         if (id === 'explore') {
-                          navigate(`/dapp/${appId}/explore/composite`)
+                          setOpenModal(OPEN_MODAL.ADD_FROM_ALL_COMPOSITES)
                           return
                         }
                         if (id === 'create') {
@@ -317,7 +318,9 @@ export default function ModelList ({
                         }
                       }}
                     >
-                      <MenuItem id='explore'>Explore Composites</MenuItem>
+                      <MenuItem id='explore'>
+                        Add From Popular Composites
+                      </MenuItem>
                       <MenuItem id='create'>Create New Composites</MenuItem>
                     </Menu>
                   </Popover>
@@ -334,31 +337,90 @@ export default function ModelList ({
           />
         </>
       )}
+      {/* CREATE_NEW_MODEL modal */}
       <Modal
         isOpen={openModal === OPEN_MODAL.CREATE_NEW_MODEL}
         onOpenChange={() => setOpenModal(OPEN_MODAL.NONE)}
       >
         <Dialog>{({ close }) => <CreateNewModel closeModal={close} />}</Dialog>
       </Modal>
+      {/* CREATE_NEW_COMPOSITE modal */}
       <Modal
         isOpen={openModal === OPEN_MODAL.CREATE_NEW_COMPOSITE}
         onOpenChange={() => setOpenModal(OPEN_MODAL.NONE)}
       >
         <Dialog>
           {({ close }) => (
-            <CreateCompositeModal
+            <CreateNewComposite
               closeModal={close}
               loadDappComposites={loadDappComposites}
               defaultSchema={getCompositeDefaultSchema(dappModels || [])}
             />
           )}
         </Dialog>
       </Modal>
+      {/* ADD_FROM_FAVORITE_MODELS modal */}
       <Modal
         isOpen={openModal === OPEN_MODAL.ADD_FROM_FAVORITE_MODELS}
         onOpenChange={() => setOpenModal(OPEN_MODAL.NONE)}
       >
-        <Dialog>{({ close }) => <FavoriteModel closeModal={close} />}</Dialog>
+        <Dialog>
+          {({ close }) => (
+            <DialogBox>
+              <div className='title'>
+                <h1>My Favorite Models</h1>
+                <button onClick={close}>
+                  <CloseIcon />
+                </button>
+              </div>
+              <div className='content'>
+                <ModelList filterStar />
+              </div>
+            </DialogBox>
+          )}
+        </Dialog>
+      </Modal>
+      {/* ADD_FROM_ALL_MODELS modal */}
+      <Modal
+        isOpen={openModal === OPEN_MODAL.ADD_FROM_ALL_MODELS}
+        onOpenChange={() => setOpenModal(OPEN_MODAL.NONE)}
+      >
+        <Dialog>
+          {({ close }) => (
+            <DialogBox>
+              <div className='title'>
+                <h1>Popular Models</h1>
+                <button onClick={close}>
+                  <CloseIcon />
+                </button>
+              </div>
+              <div className='content'>
+                <ModelList />
+              </div>
+            </DialogBox>
+          )}
+        </Dialog>
+      </Modal>
+      {/* ADD_FROM_ALL_COMPOSITES modal */}
+      <Modal
+        isOpen={openModal === OPEN_MODAL.ADD_FROM_ALL_COMPOSITES}
+        onOpenChange={() => setOpenModal(OPEN_MODAL.NONE)}
+      >
+        <Dialog>
+          {({ close }) => (
+            <DialogBox>
+              <div className='title'>
+                <h1>Popular Composites</h1>
+                <button onClick={close}>
+                  <CloseIcon />
+                </button>
+              </div>
+              <div className='content'>
+                <CompositeList />
+              </div>
+            </DialogBox>
+          )}
+        </Dialog>
       </Modal>
       {editable && isOwner && (
         <MergeBox>
@@ -383,7 +445,7 @@ export default function ModelList ({
           </DialogTrigger>
         </MergeBox>
       )}
-    </ListBox>
+    </Box>
   )
 }
 
@@ -530,7 +592,7 @@ function RemoveButton ({
   )
 }
 
-const ListBox = styled.div`
+const Box = styled.div`
   background: #1b1e23;
   border: 1px solid #39424c;
   border-radius: 20px;
@@ -651,3 +713,36 @@ const MergeBox = styled.div`
     gap: 10px;
   }
 `
+const DialogBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 20px;
+  height: calc(100vh - 100px);
+  position: relative;
+  width: 1240px;
+  margin: 0 auto;
+
+  background: #1b1e23;
+  border-radius: 20px;
+
+  > div.title {
+    flex: 0 0 42px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    color: #ffffff;
+    > h1 {
+      margin: 0;
+      font-style: italic;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+    }
+  }
+  > div.content {
+    height: 0;
+    flex: 1;
+  }
+`