add support for deleting chats

app/src/components/sidebar/index.tsx

@@ -103,6 +103,7 @@ export default function Sidebar(props: {
     className?: string;
 }) {
     const intl = useIntl();
+    const context = useAppContext();
     const dispatch = useAppDispatch();
     const sidebarOpen = useAppSelector(selectSidebarOpen);
     const onBurgerClick = useCallback(() => dispatch(toggleSidebar()), [dispatch]);
@@ -147,13 +148,13 @@ export default function Sidebar(props: {
                         <Menu.Divider />
                         <Menu.Item color="red" onClick={() => backend.current?.logout()} icon={<i className="fas fa-sign-out-alt" />}>
                             <FormattedMessage defaultMessage={"Sign out"} />
-                        </Menu.Item>
+                        </Menu.Item> 
                         */}
                     </Menu.Dropdown>
                 </Menu>
             )}
         </Container>
-    ), [sidebarOpen, width, ref, burgerLabel, onBurgerClick, dispatch]);
+    ), [sidebarOpen, width, ref, burgerLabel, onBurgerClick, dispatch, context.chat.chats.size]);
 
     return elem;
 }

app/src/components/sidebar/recent-chats.tsx

@@ -1,10 +1,13 @@
 import styled from '@emotion/styled';
 import { useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useAppContext } from '../../context';
 import { useAppDispatch } from '../../store';
 import { toggleSidebar } from '../../store/sidebar';
+import { ActionIcon, Menu } from '@mantine/core';
+import { useModals } from '@mantine/modals';
+import { backend } from '../../backend';
 
 const Container = styled.div`
     margin: calc(1.618rem - 1rem);
@@ -19,8 +22,9 @@ const Empty = styled.p`
 
 const ChatList = styled.div``;
 
-const ChatListItem = styled(Link)`
+const ChatListItemLink = styled(Link)`
     display: block;
+    position: relative;
     padding: 0.4rem 1rem;
     margin: 0.218rem 0;
     line-height: 1.7;
@@ -35,15 +39,13 @@ const ChatListItem = styled(Link)`
         background: #2b3d54;
     }
 
-    &, * {
-        color: white;
-    }
-
     strong {
         display: block;
         font-weight: 400;
         font-size: 1rem;
         line-height: 1.6;
+        padding-right: 1rem;
+        color: white;
     }
 
     p {
@@ -51,8 +53,77 @@ const ChatListItem = styled(Link)`
         font-weight: 200;
         opacity: 0.8;
     }
+
+    .mantine-ActionIcon-root {
+        position: absolute;
+        right: 0.5rem;
+        top: 50%;
+        margin-top: -14px;
+    }
 `;
 
+function ChatListItem(props: { chat: any, onClick: any, selected: boolean }) {
+    const c = props.chat;
+    const context = useAppContext();
+    const modals = useModals();
+    const navigate = useNavigate();
+
+    const onDelete = useCallback(() => {
+        modals.openConfirmModal({
+            title: "Are you sure you want to delete this chat?",
+            children: <p style={{ lineHeight: 1.7 }}>The chat "{c.title}" will be permanently deleted. This cannot be undone.</p>,
+            labels: {
+                confirm: "Delete permanently",
+                cancel: "Cancel",
+            },
+            confirmProps: {
+                color: 'red',
+            },
+            onConfirm: async () => {
+                try {
+                    await backend.current?.deleteChat(c.chatID);
+                    context.chat.deleteChat(c.chatID);
+                    navigate('/');
+                } catch (e) {
+                    console.error(e);
+                    modals.openConfirmModal({
+                        title: "Something went wrong",
+                        children: <p style={{ lineHeight: 1.7 }}>The chat "{c.title}" could not be deleted.</p>,
+                        labels: {
+                            confirm: "Try again",
+                            cancel: "Cancel",
+                        },
+                        onConfirm: onDelete,
+                    });
+                }
+            },
+        });
+    }, [c.chatID, c.title]);
+
+    return (
+        <ChatListItemLink to={'/chat/' + c.chatID}
+            onClick={props.onClick}
+            data-chat-id={c.chatID}
+            className={props.selected ? 'selected' : ''}>
+            <strong>{c.title || <FormattedMessage defaultMessage={"Untitled"} description="default title for untitled chat sessions" />}</strong>
+            {props.selected && (
+                <Menu>
+                    <Menu.Target>
+                        <ActionIcon>
+                            <i className="fas fa-ellipsis" />
+                        </ActionIcon>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                        <Menu.Item onClick={onDelete} color="red" icon={<i className="fa fa-trash" />}>
+                            <FormattedMessage defaultMessage={"Delete this chat"} />
+                        </Menu.Item>
+                    </Menu.Dropdown>
+                </Menu>
+            )}
+        </ChatListItemLink>
+    );
+}
+
 export default function RecentChats(props: any) {
     const context = useAppContext();
     const dispatch = useAppDispatch();
@@ -79,13 +150,7 @@ export default function RecentChats(props: any) {
         <Container>
             {recentChats.length > 0 && <ChatList>
                 {recentChats.map(c => (
-                    <ChatListItem key={c.chatID}
-                                  to={'/chat/' + c.chatID}
-                                  onClick={onClick}
-                                  data-chat-id={c.chatID}
-                                  className={c.chatID === currentChatID ? 'selected' : ''}>
-                        <strong>{c.title || <FormattedMessage defaultMessage={"Untitled"} description="default title for untitled chat sessions" />}</strong>
-                    </ChatListItem>
+                    <ChatListItem key={c.chatID} chat={c} onClick={onClick} selected={c.chatID === currentChatID} />
                 ))}
             </ChatList>}
             {recentChats.length === 0 && <Empty>