Chat Drawer: improve view menu

src/apps/chat/components/ChatDrawer.tsx

@@ -19,6 +19,7 @@ import { FoldersToggleOff } from '~/common/components/icons/FoldersToggleOff';
 import { FoldersToggleOn } from '~/common/components/icons/FoldersToggleOn';
 import { PageDrawerHeader } from '~/common/layout/optima/components/PageDrawerHeader';
 import { PageDrawerList } from '~/common/layout/optima/components/PageDrawerList';
+import { capitalizeFirstLetter } from '~/common/util/textUtils';
 import { themeScalingMap, themeZIndexOverMobileDrawer } from '~/common/app.theme';
 import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
@@ -27,6 +28,7 @@ import { ChatDrawerItemMemo, FolderChangeRequest } from './ChatDrawerItem';
 import { ChatFolderList } from './folders/ChatFolderList';
 import { ChatNavGrouping, useChatNavRenderItems } from './useChatNavRenderItems';
 import { ClearFolderText } from './folders/useFolderDropdown';
+import { useChatShowRelativeSize } from '../store-app-chat';
 
 
 // this is here to make shallow comparisons work on the next hook
@@ -77,9 +79,10 @@ function ChatDrawer(props: {
 
   // external state
   const { closeDrawer, closeDrawerOnMobile } = useOptimaDrawers();
+  const { showRelativeSize, toggleRelativeSize } = useChatShowRelativeSize();
   const { activeFolder, allFolders, enableFolders, toggleEnableFolders } = useFolders(props.activeFolderId);
   const { filteredChatsCount, filteredChatIDs, filteredChatsAreEmpty, filteredChatsBarBasis, filteredChatsIncludeActive, renderNavItems } = useChatNavRenderItems(
-    props.activeConversationId, props.chatPanesConversationIds, debouncedSearchQuery, activeFolder, allFolders, navGrouping,
+    props.activeConversationId, props.chatPanesConversationIds, debouncedSearchQuery, activeFolder, allFolders, navGrouping, showRelativeSize,
   );
   const { contentScaling, showSymbols } = useUIPreferencesStore(state => ({
     contentScaling: state.contentScaling,
@@ -140,22 +143,38 @@ function ChatDrawer(props: {
   const groupingComponent = React.useMemo(() => (
     <Dropdown>
       <MenuButton
-        aria-label='Group by'
+        aria-label='View options'
         slots={{ root: IconButton }}
         slotProps={{ root: { size: 'sm' } }}
       >
         <MoreVertIcon sx={{ fontSize: 'xl' }} />
       </MenuButton>
-      <Menu placement='bottom-start' sx={{ zIndex: themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */ }}>
+      <Menu placement='bottom-start' sx={{ minWidth: 180, zIndex: themeZIndexOverMobileDrawer /* need to be on top of the Modal on Mobile */ }}>
+        <ListItem>
+          <Typography level='body-sm'>Group By</Typography>
+        </ListItem>
         {(['date', 'persona'] as const).map(_gName => (
-          <MenuItem key={'group-' + _gName} selected={navGrouping === _gName} onClick={() => setNavGrouping(grouping => grouping === _gName ? false : _gName)}>
+          <MenuItem
+            key={'group-' + _gName}
+            aria-label={`Group by ${_gName}`}
+            selected={navGrouping === _gName}
+            onClick={() => setNavGrouping(grouping => grouping === _gName ? false : _gName)}
+          >
             <ListItemDecorator>{navGrouping === _gName && <CheckIcon />}</ListItemDecorator>
-            Group by {_gName}
+            {capitalizeFirstLetter(_gName)}
           </MenuItem>
         ))}
+        <ListDivider />
+        <ListItem>
+          <Typography level='body-sm'>Show</Typography>
+        </ListItem>
+        <MenuItem onClick={toggleRelativeSize}>
+          <ListItemDecorator>{showRelativeSize && <CheckIcon />}</ListItemDecorator>
+          Relative Size
+        </MenuItem>
       </Menu>
     </Dropdown>
-  ), [navGrouping]);
+  ), [navGrouping, showRelativeSize, toggleRelativeSize]);
 
 
   return <>
@@ -256,7 +275,7 @@ function ChatDrawer(props: {
               key={'nav-chat-' + item.conversationId}
               item={item}
               showSymbols={showSymbols}
-              bottomBarBasis={showSymbols ? filteredChatsBarBasis : 0}
+              bottomBarBasis={filteredChatsBarBasis}
               onConversationActivate={handleConversationActivate}
               onConversationBranch={onConversationBranch}
               onConversationDelete={handleConversationDeleteNoConfirmation}

src/apps/chat/components/ChatDrawerItem.tsx

@@ -168,8 +168,7 @@ function ChatDrawerItem(props: {
 
   const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓';
 
-  const progress = props.bottomBarBasis ? 100 * (searchFrequency ?? messageCount) / props.bottomBarBasis : 0;
-
+  const progress = props.bottomBarBasis ? 100 * (searchFrequency || messageCount) / props.bottomBarBasis : 0;
 
   const titleRowComponent = React.useMemo(() => <>
 
@@ -234,7 +233,7 @@ function ChatDrawerItem(props: {
   const progressBarFixedComponent = React.useMemo(() =>
     progress > 0 && (
       <Box sx={{
-        backgroundColor: 'neutral.softBg',
+        backgroundColor: 'neutral.softHoverBg',
         position: 'absolute', left: 0, bottom: 0, width: progress + '%', height: 4,
       }} />
     ), [progress]);

src/apps/chat/components/useChatNavRenderItems.tsx

@@ -7,7 +7,6 @@ import type { ChatNavigationItemData } from './ChatDrawerItem';
 
 
 // configuration
-const AUTO_UNDERLINE_COUNT = 40;
 const SEARCH_MIN_CHARS = 3;
 
 
@@ -79,6 +78,7 @@ export function useChatNavRenderItems(
   activeFolder: DFolder | null,
   allFolders: DFolder[],
   grouping: ChatNavGrouping,
+  showRelativeSize: boolean,
 ): {
   renderNavItems: ChatRenderItemData[],
   filteredChatIDs: DConversationId[],
@@ -185,7 +185,7 @@ export function useChatNavRenderItems(
       const filteredChatIDs = chatNavItems.map(_c => _c.conversationId);
       const filteredChatsCount = chatNavItems.length;
       const filteredChatsAreEmpty = !filteredChatsCount || (filteredChatsCount === 1 && chatNavItems[0].isEmpty);
-      const filteredChatsBarBasis = (filteredChatsCount >= AUTO_UNDERLINE_COUNT || isSearching)
+      const filteredChatsBarBasis = ((showRelativeSize && filteredChatsCount >= 2) || isSearching)
         ? chatNavItems.reduce((longest, _c) => Math.max(longest, isSearching ? _c.searchFrequency : _c.messageCount), 1)
         : 0;
 
@@ -202,7 +202,9 @@ export function useChatNavRenderItems(
       // we only compare the renderNavItems array, which shall be changed if the rest changes
       return a.renderNavItems.length === b.renderNavItems.length
         && a.renderNavItems.every((_a, i) => shallow(_a, b.renderNavItems[i]))
-        && shallow(a.filteredChatIDs, b.filteredChatIDs);
+        && shallow(a.filteredChatIDs, b.filteredChatIDs)
+        // we also compare this, as it changes with a parameter
+        && a.filteredChatsBarBasis === b.filteredChatsBarBasis;
     },
   );
 }

src/apps/chat/store-app-chat.ts

@@ -10,6 +10,8 @@ export type ChatAutoSpeakType = 'off' | 'firstLine' | 'all';
 
 interface AppChatStore {
 
+  // chat AI
+
   autoSpeak: ChatAutoSpeakType;
   setAutoSpeak: (autoSpeak: ChatAutoSpeakType) => void;
 
@@ -22,9 +24,14 @@ interface AppChatStore {
   autoTitleChat: boolean;
   setAutoTitleChat: (autoTitleChat: boolean) => void;
 
+  // chat UI
+
   micTimeoutMs: number;
   setMicTimeoutMs: (micTimeoutMs: number) => void;
 
+  showRelativeSize: boolean;
+  setShowRelativeSize: (showRelativeSize: boolean) => void;
+
   showTextDiff: boolean;
   setShowTextDiff: (showTextDiff: boolean) => void;
 
@@ -52,6 +59,9 @@ const useAppChatStore = create<AppChatStore>()(persist(
     micTimeoutMs: 2000,
     setMicTimeoutMs: (micTimeoutMs: number) => _set({ micTimeoutMs }),
 
+    showRelativeSize: false,
+    setShowRelativeSize: (showRelativeSize: boolean) => _set({ showRelativeSize }),
+
     showTextDiff: false,
     setShowTextDiff: (showTextDiff: boolean) => _set({ showTextDiff }),
 
@@ -103,6 +113,12 @@ export const useChatMicTimeoutMsValue = (): number =>
 export const useChatMicTimeoutMs = (): [number, (micTimeoutMs: number) => void] =>
   useAppChatStore(state => [state.micTimeoutMs, state.setMicTimeoutMs], shallow);
 
+export const useChatShowRelativeSize = (): { showRelativeSize: boolean, toggleRelativeSize: () => void } => {
+  const showRelativeSize = useAppChatStore(state => state.showRelativeSize);
+  const toggleRelativeSize = () => useAppChatStore.getState().setShowRelativeSize(!showRelativeSize);
+  return { showRelativeSize, toggleRelativeSize };
+};
+
 export const useChatShowTextDiff = (): [boolean, (showDiff: boolean) => void] =>
   useAppChatStore(state => [state.showTextDiff, state.setShowTextDiff], shallow);