improve ui consistency with immer; implement addConversation

layouts/LayoutDefault.tsx

@@ -1,4 +1,5 @@
 import "@mantine/core/styles.css";
+import { navigate } from "vike/client/router";
 import {
   AppShell,
   Burger,
@@ -15,6 +16,7 @@ import {
   IconCircle,
   IconCircleFilled,
   IconTrashFilled,
+  IconPlus,
 } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
 import theme from "./theme.js";
@@ -36,7 +38,7 @@ export default function LayoutDefault({
   const setConversations = useStore((state) => state.setConversations);
   const addConversation = useStore((state) => state.addConversation);
   const removeConversation = useStore((state) => state.removeConversation);
-  const conversationId = useStore((state) => state.conversationId);
+  const conversationId = useStore((state) => state.selectedConversationId);
 
   useEffect(() => {
     trpc.chat.listConversations.query().then((res) => {
@@ -96,11 +98,25 @@ export default function LayoutDefault({
             label="Chats"
             leftSection={<IconActivity size={16} stroke={1.5} />}
             rightSection={
-              <IconChevronRight
-                size={12}
-                stroke={1.5}
-                className="mantine-rotate-rtl"
-              />
+              <>
+                <IconPlus
+                  size={16}
+                  stroke={1.5}
+                  className="border-on-hover"
+                  onClick={() => {
+                    trpc.chat.createConversation.mutate().then((res) => {
+                      if (!res?.id) return;
+                      addConversation(res);
+                      navigate(`/chat/${res.id}`);
+                    });
+                  }}
+                />
+                <IconChevronRight
+                  size={12}
+                  stroke={1.5}
+                  className="mantine-rotate-rtl"
+                />
+              </>
             }
             variant="subtle"
             active={urlPathname.startsWith("/chat")}