From 4d807ecf5c8ecc0116479f53c8283d980dd97d75 Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Tue, 2 Jan 2024 23:49:21 -0800 Subject: [PATCH] New UI: transfer App Drawer lists into the Plugged --- src/apps/chat/AppChat.tsx | 8 +- .../components/applayout/ChatDrawerItems.tsx | 123 +++++++++--------- src/apps/link/AppChatLink.tsx | 6 +- ...Items.tsx => AppChatLinkDrawerContent.tsx} | 7 +- src/common/layout/optima/PageDrawer.tsx | 25 +--- .../optima/components/PageDrawerList.tsx | 48 +++++++ 6 files changed, 127 insertions(+), 90 deletions(-) rename src/apps/link/{AppChatLinkDrawerItems.tsx => AppChatLinkDrawerContent.tsx} (91%) create mode 100644 src/common/layout/optima/components/PageDrawerList.tsx diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx index 713d176cc..38f5a298b 100644 --- a/src/apps/chat/AppChat.tsx +++ b/src/apps/chat/AppChat.tsx @@ -23,7 +23,7 @@ import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optim import { useUXLabsStore } from '~/common/state/store-ux-labs'; import type { ComposerOutputMultiPart } from './components/composer/composer.types'; -import { ChatDrawerItemsMemo } from './components/applayout/ChatDrawerItems'; +import { ChatDrawerContentMemo } from './components/applayout/ChatDrawerItems'; import { ChatDropdowns } from './components/applayout/ChatDropdowns'; import { ChatMenuItems } from './components/applayout/ChatMenuItems'; import { ChatMessageList } from './components/ChatMessageList'; @@ -384,9 +384,9 @@ export function AppChat() { [focusedConversationId, isSplitPane, toggleSplitPane], ); - const drawerItems = React.useMemo( + const drawerContent = React.useMemo( () => ( - folder.id === selectedFolderId)?.conversationIds.length || 0 : conversations.length; - usePluggableOptimaLayout(drawerItems, centerItems, menuItems, 'AppChat'); + usePluggableOptimaLayout(drawerContent, centerItems, menuItems, 'AppChat'); return ( <> diff --git a/src/apps/chat/components/applayout/ChatDrawerItems.tsx b/src/apps/chat/components/applayout/ChatDrawerItems.tsx index 363824704..10b311977 100644 --- a/src/apps/chat/components/applayout/ChatDrawerItems.tsx +++ b/src/apps/chat/components/applayout/ChatDrawerItems.tsx @@ -1,24 +1,24 @@ import * as React from 'react'; -import { shallow } from 'zustand/shallow'; import { Box, ListDivider, ListItemDecorator, MenuItem, Typography } from '@mui/joy'; import AddIcon from '@mui/icons-material/Add'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import FileUploadIcon from '@mui/icons-material/FileUpload'; -import { DConversationId, useChatStore, useConversationsByFolder } from '~/common/state/store-chats'; +import { DConversationId, useConversationsByFolder } from '~/common/state/store-chats'; import { OpenAIIcon } from '~/common/components/icons/OpenAIIcon'; +import { PageDrawerList, PageDrawerTallItemSx } from '~/common/layout/optima/components/PageDrawerList'; +import { useFolderStore } from '~/common/state/store-folders'; import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers'; import { useUIPreferencesStore } from '~/common/state/store-ui'; import { useUXLabsStore } from '~/common/state/store-ux-labs'; -import { useFolderStore } from '~/common/state/store-folders'; import { ChatNavigationItemMemo } from './ChatNavigationItem'; import { ChatFolderList } from './folder/ChatFolderList'; // type ListGrouping = 'off' | 'persona'; -export const ChatDrawerItemsMemo = React.memo(ChatDrawerItems); +export const ChatDrawerContentMemo = React.memo(ChatDrawerItems); function ChatDrawerItems(props: { activeConversationId: DConversationId | null, @@ -102,67 +102,72 @@ function ChatDrawerItems(props: { {/**/} state.folders)} - selectedFolderId={selectedFolderId} - conversationsByFolder={conversations} - /> - + onFolderSelect={handleFolderSelect} + folders={useFolderStore((state) => state.folders)} + selectedFolderId={selectedFolderId} + conversationsByFolder={conversations} + /> - - - - New - {/**/} + + + + + + + + New + {/**/} + + + + + + + {/**/} + {/* */} + {/* Conversations*/} + {/* */} + {/* newValue && setGrouping(newValue)}>*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + + {conversations.map(conversation => + )} - - + - - {/**/} - {/* */} - {/* Conversations*/} - {/* */} - {/* newValue && setGrouping(newValue)}>*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} + + + + + Import chats + + - {conversations.map(conversation => - )} - + props.onConversationsDeleteAll(selectedFolderId)}> + + + Delete {totalConversations >= 2 ? `all ${totalConversations} chats` : 'chat'} + + - - - - - - - Import chats - - - - props.onConversationsDeleteAll(selectedFolderId)}> - - - Delete {totalConversations >= 2 ? `all ${totalConversations} chats` : 'chat'} - - + ; } \ No newline at end of file diff --git a/src/apps/link/AppChatLink.tsx b/src/apps/link/AppChatLink.tsx index 828273bdd..e6c0c42a3 100644 --- a/src/apps/link/AppChatLink.tsx +++ b/src/apps/link/AppChatLink.tsx @@ -16,7 +16,7 @@ import { conversationTitle } from '~/common/state/store-chats'; import { themeBgAppDarker } from '~/common/app.theme'; import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout'; -import { AppChatLinkDrawerItems } from './AppChatLinkDrawerItems'; +import { AppChatLinkDrawerContent } from './AppChatLinkDrawerContent'; import { AppChatLinkMenuItems } from './AppChatLinkMenuItems'; import { ViewChatLink } from './ViewChatLink'; @@ -84,9 +84,9 @@ export function AppChatLink(props: { linkId: string }) { // pluggable UI - const drawerItems = React.useMemo(() => , []); + const drawerContent = React.useMemo(() => , []); const menuItems = React.useMemo(() => , []); - usePluggableOptimaLayout(hasLinkItems ? drawerItems : null, null, menuItems, 'AppChatLink'); + usePluggableOptimaLayout(hasLinkItems ? drawerContent : null, null, menuItems, 'AppChatLink'); const pageTitle = (data?.conversation && conversationTitle(data.conversation)) || 'Chat Link'; diff --git a/src/apps/link/AppChatLinkDrawerItems.tsx b/src/apps/link/AppChatLinkDrawerContent.tsx similarity index 91% rename from src/apps/link/AppChatLinkDrawerItems.tsx rename to src/apps/link/AppChatLinkDrawerContent.tsx index a10b2b39a..4a9efab3d 100644 --- a/src/apps/link/AppChatLinkDrawerItems.tsx +++ b/src/apps/link/AppChatLinkDrawerContent.tsx @@ -10,13 +10,14 @@ import { Brand } from '~/common/app.config'; import { Link } from '~/common/components/Link'; import { getChatLinkRelativePath, ROUTE_INDEX } from '~/common/app.routes'; import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers'; +import { PageDrawerList } from '~/common/layout/optima/components/PageDrawerList'; /** * Drawer Items are all the links already shared, for quick access. * This is stores in the Trade Store (local storage). */ -export function AppChatLinkDrawerItems() { +export function AppChatLinkDrawerContent() { // external state const { closeDrawerOnMobile } = useOptimaDrawers(); @@ -25,7 +26,7 @@ export function AppChatLinkDrawerItems() { .sort((a, b) => b.createdAt.localeCompare(a.createdAt)); const notEmpty = chatLinkItems.length > 0; - return <> + return } - ; + ; } \ No newline at end of file diff --git a/src/common/layout/optima/PageDrawer.tsx b/src/common/layout/optima/PageDrawer.tsx index 2b8470b78..efd4c7ee5 100644 --- a/src/common/layout/optima/PageDrawer.tsx +++ b/src/common/layout/optima/PageDrawer.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { IconButton, MenuList, Sheet, Typography } from '@mui/joy'; +import { IconButton, Sheet, Typography } from '@mui/joy'; import CloseIcon from '@mui/icons-material/Close'; import type { NavItemApp } from '~/common/app.nav'; @@ -39,25 +39,8 @@ export function PageDrawer(props: { - {/* Pluggable content (Pane) */} - - {props.children} - + {/* Pluggable Drawer Content */} + {props.children} + ; } \ No newline at end of file diff --git a/src/common/layout/optima/components/PageDrawerList.tsx b/src/common/layout/optima/components/PageDrawerList.tsx new file mode 100644 index 000000000..5e974f95a --- /dev/null +++ b/src/common/layout/optima/components/PageDrawerList.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; + +import { ColorPaletteProp, MenuList, VariantProp } from '@mui/joy'; +import { SxProps } from '@mui/joy/styles/types'; + + +export const PageDrawerTallItemSx: SxProps = { + '--ListItem-minHeight': '3rem', +}; + + +/** + * Used by pluggable layouts to have a standardized list appearance + */ +export function PageDrawerList(props: { + variant?: VariantProp, + color?: ColorPaletteProp, + largeIcons?: boolean, + tallRows?: boolean, + noTopPadding?: boolean, + noBottomPadding?: boolean, + children: React.ReactNode +}) { + + return ( + + {props.children} + + ); +} \ No newline at end of file