Call: persist all 3 settings

src/apps/call/AppCall.tsx

@@ -8,7 +8,7 @@ import { useRouterQuery } from '~/common/app.routes';
 import { CallWizard } from './CallWizard';
 import { Contacts } from './Contacts';
 import { Telephone } from './Telephone';
-import { useCallToggleGrayUI } from './state/store-app-call';
+import { useAppCallStore } from './state/store-app-call';
 
 
 /**
@@ -28,7 +28,7 @@ export function AppCall() {
   const [callIntent, setCallIntent] = React.useState<AppCallIntent | null>(null);
 
   // external state
-  const { callGrayUI } = useCallToggleGrayUI();
+  const grayUI = useAppCallStore(state => state.grayUI);
   const query = useRouterQuery<Partial<AppCallIntent>>();
 
 
@@ -48,8 +48,8 @@ export function AppCall() {
 
   return (
     <Sheet
-      variant={callGrayUI ? 'solid' : 'soft'}
-      invertedColors={callGrayUI}
+      variant={grayUI ? 'solid' : 'soft'}
+      invertedColors={grayUI ? true : undefined}
       sx={{
         // take the full V-area (we're inside PageWrapper) and scroll as needed
         flexGrow: 1,

src/apps/call/Contacts.tsx

@@ -12,7 +12,7 @@ import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout
 
 import type { AppCallIntent } from './AppCall';
 import { MockPersona, useMockPersonas } from './state/useMockPersonas';
-import { useCallToggleGrayUI } from './state/store-app-call';
+import { useAppCallStore } from './state/store-app-call';
 
 
 // number of conversations to show before collapsing
@@ -233,43 +233,36 @@ function useConversationsByPersona() {
 
 export function Contacts(props: { setCallIntent: (intent: AppCallIntent) => void }) {
 
-  // state
-  const [hideConversations, setHideConversations] = React.useState(false);
-  const [hideSupport, setHideSupport] = React.useState(false);
-
   // external state
+  const {
+    grayUI, toggleGrayUI,
+    showConversations, toggleShowConversations,
+    showSupport, toggleShowSupport,
+  } = useAppCallStore();
   const { personas } = useMockPersonas();
-  const { callGrayUI, callToggleGrayUI } = useCallToggleGrayUI();
   const conversationsByPersona = useConversationsByPersona();
 
 
   // pluggable UI
 
-  const menuItems = React.useMemo(() => {
+  const menuItems = React.useMemo(() => <>
 
-    const handleConversationsToggle = () => setHideConversations(on => !on);
+    <MenuItem onClick={toggleShowConversations}>
+      Conversations
+      <Switch checked={showConversations} sx={{ ml: 'auto' }} />
+    </MenuItem>
 
-    const handleSupportToggle = () => setHideSupport(on => !on);
+    <MenuItem onClick={toggleShowSupport}>
+      Support
+      <Switch checked={showSupport} sx={{ ml: 'auto' }} />
+    </MenuItem>
 
-    return <>
+    <MenuItem onClick={toggleGrayUI}>
+      Grayed UI
+      <Switch checked={grayUI} sx={{ ml: 'auto' }} />
+    </MenuItem>
 
-      <MenuItem onClick={handleConversationsToggle}>
-        Conversations
-        <Switch checked={!hideConversations} sx={{ ml: 'auto' }} />
-      </MenuItem>
-
-      <MenuItem onClick={handleSupportToggle}>
-        Support
-        <Switch checked={!hideSupport} sx={{ ml: 'auto' }} />
-      </MenuItem>
-
-      <MenuItem onClick={callToggleGrayUI}>
-        Grayed UI
-        <Switch checked={callGrayUI} sx={{ ml: 'auto' }} />
-      </MenuItem>
-
-    </>;
-  }, [callGrayUI, callToggleGrayUI, hideConversations, hideSupport]);
+  </>, [grayUI, showConversations, showSupport, toggleGrayUI, toggleShowConversations, toggleShowSupport]);
 
   usePluggableOptimaLayout(null, null, menuItems, 'CallUI');
 
@@ -325,16 +318,16 @@ export function Contacts(props: { setCallIntent: (intent: AppCallIntent) => void
         <CallContactCard
           key={persona.personaId}
           persona={persona}
-          callGrayUI={callGrayUI}
-          conversations={hideConversations ? [] : conversationsByPersona[persona.personaId] || []}
+          callGrayUI={grayUI}
+          conversations={!showConversations ? [] : conversationsByPersona[persona.personaId] || []}
           setCallIntent={props.setCallIntent}
         />,
       )}
     </Box>
 
-    {!hideSupport && <ListDivider sx={{ my: 1 }} />}
+    {showSupport && <ListDivider sx={{ my: 1 }} />}
 
-    {!hideSupport && <GitHubProjectIssueCard
+    {showSupport && <GitHubProjectIssueCard
       issue={354}
       text='Call App: Support thread and compatibility matrix'
       note={<>

src/apps/call/Telephone.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { Box, Card, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
+import { Box, Card, ListDivider, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import CallEndIcon from '@mui/icons-material/CallEnd';
 import CallIcon from '@mui/icons-material/Call';
-import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined';
 import MicIcon from '@mui/icons-material/Mic';
 import MicNoneIcon from '@mui/icons-material/MicNone';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
@@ -29,6 +28,7 @@ import { CallAvatar } from './components/CallAvatar';
 import { CallButton } from './components/CallButton';
 import { CallMessage } from './components/CallMessage';
 import { CallStatus } from './components/CallStatus';
+import { useAppCallStore } from './state/store-app-call';
 
 
 function CallMenuItems(props: {
@@ -39,6 +39,7 @@ function CallMenuItems(props: {
 }) {
 
   // external state
+  const { grayUI, toggleGrayUI } = useAppCallStore();
   const { voicesDropdown } = useElevenLabsVoiceDropdown(false, !props.override);
 
   const handlePushToTalkToggle = () => props.setPushToTalk(!props.pushToTalk);
@@ -64,8 +65,14 @@ function CallMenuItems(props: {
       {voicesDropdown}
     </MenuItem>
 
+    <ListDivider />
+
+    <MenuItem onClick={toggleGrayUI}>
+      Grayed UI
+      <Switch checked={grayUI} sx={{ ml: 'auto' }} />
+    </MenuItem>
+
     <MenuItem component={Link} href='https://github.com/enricoros/big-agi/issues/175' target='_blank'>
-      <ListItemDecorator><ChatOutlinedIcon /></ListItemDecorator>
       Voice Calls Feedback
     </MenuItem>
 

src/apps/call/state/store-app-call.ts

@@ -1,29 +1,35 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { shallow } from 'zustand/shallow';
 
 
 // Call settings
 
 interface AppCallStore {
+
   grayUI: boolean;
   toggleGrayUI: () => void;
+
+  showConversations: boolean;
+  toggleShowConversations: () => void;
+
+  showSupport: boolean;
+  toggleShowSupport: () => void;
+
 }
 
-const useAppCallStore = create<AppCallStore>()(persist(
+export const useAppCallStore = create<AppCallStore>()(persist(
   (_set, _get) => ({
 
     grayUI: false,
     toggleGrayUI: () => _set(state => ({ grayUI: !state.grayUI })),
 
+    showConversations: true,
+    toggleShowConversations: () => _set(state => ({ showConversations: !state.showConversations })),
+
+    showSupport: true,
+    toggleShowSupport: () => _set(state => ({ showSupport: !state.showSupport })),
+
   }), {
     name: 'app-app-call',
   },
 ));
-
-
-export const useCallToggleGrayUI = () =>
-  useAppCallStore(state => ({
-    callGrayUI: state.grayUI,
-    callToggleGrayUI: () => state.toggleGrayUI(),
-  }), shallow);