Link: option to show the deletion keys in the drawer

src/apps/link/AppLinkChat.tsx

@@ -102,6 +102,7 @@ export function AppLinkChat(props: { chatLinkId: string | null }) {
   // state
   const [deleteConfirmId, setDeleteConfirmId] = React.useState<string | null>(null);
   const [deleteConfirmKey, setDeleteConfirmKey] = React.useState<string | null>(null);
+  const [showDeletionKeys, setShowDeletionKeys] = React.useState<boolean>(false);
 
   // derived state 1
   const isListPage = props.chatLinkId === SPECIAL_LIST_PAGE_ID;
@@ -189,13 +190,16 @@ export function AppLinkChat(props: { chatLinkId: string | null }) {
   const drawerContent = React.useMemo(() => <LinkChatDrawer
     activeLinkId={linkId}
     sharedChatLinkItems={sharedChatLinkItems}
+    showDeletionKeys={showDeletionKeys}
     onDeleteLink={handleConfirmDeletion}
-  />, [handleConfirmDeletion, linkId, sharedChatLinkItems]);
+  />, [handleConfirmDeletion, linkId, sharedChatLinkItems, showDeletionKeys]);
 
   const menuItems = React.useMemo(() => <LinkChatMenuItems
     activeLinkId={linkId}
+    showDeletionKeys={showDeletionKeys}
     onDeleteLink={handleConfirmDeletion}
-  />, [handleConfirmDeletion, linkId]);
+    onToggleDeletionKeys={() => setShowDeletionKeys(on => !on)}
+  />, [handleConfirmDeletion, linkId, showDeletionKeys]);
 
   usePluggableOptimaLayout(drawerContent, null, menuItems, 'AppChatLink');
 

src/apps/link/LinkChatDrawer.tsx

@@ -20,6 +20,7 @@ import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
 export function LinkChatDrawer(props: {
   activeLinkId: string | null,
   sharedChatLinkItems: SharedChatLinkItem[]
+  showDeletionKeys: boolean,
   onDeleteLink: (linkId: string) => void,
 }) {
 
@@ -70,6 +71,9 @@ export function LinkChatDrawer(props: {
                 <Typography level='title-sm'>
                   {item.chatTitle || 'Untitled Chat'}
                 </Typography>
+                {props.showDeletionKeys && <Typography level='body-xs'>
+                  Deletion Key: {item.deletionKey}
+                </Typography>}
                 <Typography level='body-xs'>
                   <TimeAgo date={item.createdAt} />
                 </Typography>

src/apps/link/LinkChatMenuItems.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
+import { ListDivider, ListItemDecorator, MenuItem, Switch, Typography } from '@mui/joy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 
 import { useUIPreferencesStore } from '~/common/state/store-ui';
@@ -14,7 +14,9 @@ import { useChatShowSystemMessages } from '../chat/store-app-chat';
  */
 export function LinkChatMenuItems(props: {
   activeLinkId: string | null,
+  showDeletionKeys: boolean,
   onDeleteLink: (linkId: string) => void,
+  onToggleDeletionKeys: () => void,
 }) {
 
   // external state
@@ -79,6 +81,18 @@ export function LinkChatMenuItems(props: {
       />
     </MenuItem>
 
+    <MenuItem onClick={props.onToggleDeletionKeys} sx={{ justifyContent: 'space-between' }}>
+      <Typography>
+        Show Keys
+      </Typography>
+      <Switch
+        checked={props.showDeletionKeys}
+        slotProps={{ endDecorator: { sx: { minWidth: 26 } } }}
+      />
+    </MenuItem>
+
+    <ListDivider />
+
     <MenuItem onClick={handleDeleteLink} sx={{ justifyContent: 'space-between' }}>
       Delete
       <ListItemDecorator>