Navbar with AI chats (#18161)

## Summary
Add Home/Chat tabs and a dedicated threads list in the navigation
drawer.

## Changes
- **Navbar tabs:** Tabs in the drawer to switch between Home and Chat
(with “New chat” button). Shown on desktop when expanded and on mobile
below the workspace selector.
- **Navbar threads list:** New `NavigationDrawerAIChatThreadsList` for
the Chat tab with date groups (Today / Yesterday / Older), thread rows
as `NavigationDrawerItem` (IconComment, title, timestamp). Shared
`useAIChatThreadClick` hook used by navbar and command menu; navbar
passes `resetNavigationStack: true`.
- **NavigationDrawerItem:** New `alwaysShowRightOptions` prop so the
timestamp is always visible (no hover-only).

---------

Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx

@@ -1,13 +1,7 @@
-import { agentChatUsageState } from '@/ai/states/agentChatUsageState';
-import { currentAIChatThreadState } from '@/ai/states/currentAIChatThreadState';
-import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';
-import { useOpenAskAIPageInCommandMenu } from '@/command-menu/hooks/useOpenAskAIPageInCommandMenu';
-import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
-import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
+import { useAIChatThreadClick } from '@/ai/hooks/useAIChatThreadClick';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
-import { isDefined } from 'twenty-shared/utils';
 import { IconSparkles } from 'twenty-ui/display';
 import { type AgentChatThread } from '~/generated-metadata/graphql';
 
@@ -24,7 +18,7 @@ const StyledDateGroup = styled.div`
 const StyledDateHeader = styled.div`
   color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.xs};
-  font-weight: 600;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;
 
@@ -79,39 +73,7 @@ export const AIChatThreadGroup = ({
 }) => {
   const { t } = useLingui();
   const theme = useTheme();
-  const [, setCurrentAIChatThread] = useAtomState(currentAIChatThreadState);
-  const setCurrentAIChatThreadTitle = useSetAtomState(
-    currentAIChatThreadTitleState,
-  );
-  const setAgentChatUsage = useSetAtomState(agentChatUsageState);
-  const { openAskAIPage } = useOpenAskAIPageInCommandMenu();
-
-  const handleThreadClick = (thread: AgentChatThread) => {
-    setCurrentAIChatThread(thread.id);
-    setCurrentAIChatThreadTitle(thread.title ?? null);
-
-    const hasUsageData =
-      (thread.conversationSize ?? 0) > 0 &&
-      isDefined(thread.contextWindowTokens);
-
-    setAgentChatUsage(
-      hasUsageData
-        ? {
-            lastMessage: null,
-            conversationSize: thread.conversationSize ?? 0,
-            contextWindowTokens: thread.contextWindowTokens ?? 0,
-            inputTokens: thread.totalInputTokens,
-            outputTokens: thread.totalOutputTokens,
-            inputCredits: thread.totalInputCredits,
-            outputCredits: thread.totalOutputCredits,
-          }
-        : null,
-    );
-
-    openAskAIPage({
-      resetNavigationStack: false,
-    });
-  };
+  const { handleThreadClick } = useAIChatThreadClick();
 
   if (threads.length === 0) {
     return null;