refactor(web): split ChatView into chat-view module

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/views/ChatView.stories.tsx

@@ -1,21 +1,26 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ChatView } from './ChatView';
+import { ChatView, ChatViewSkeleton } from './chat-view';
 
 const meta: Meta<typeof ChatView> = {
-    title: 'Components/Features/Views/ChatView',
-    component: ChatView,
-    parameters: { layout: 'fullscreen' },
-    tags: ['autodocs'],
-    decorators: [
-        (Story) => (
-            <div className="bg-kodo-background min-h-screen">
-                <Story />
-            </div>
-        ),
-    ],
+  title: 'Components/Features/Views/ChatView',
+  component: ChatView,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="bg-kodo-background min-h-layout-page">
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = { name: 'Par défaut' };
+
+export const Loading: Story = {
+  render: () => <ChatViewSkeleton />,
+  name: 'Chargement',
+};

apps/web/src/components/views/ChatView.tsx

@@ -1,10 +1 @@
-import React from 'react';
-import { ChatInterface } from '@/features/chat/components/ChatInterface';
-
-export const ChatView: React.FC = () => {
-  return (
-    <div className="h-[calc(100vh-6rem)]">
-      <ChatInterface />
-    </div>
-  );
-};
+export { ChatView } from './chat-view';

apps/web/src/components/views/chat-view/ChatView.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ChatInterface } from '@/features/chat/components/ChatInterface';
+import type { ChatViewProps } from './types';
+
+export function ChatView({ className }: ChatViewProps = {}) {
+  return (
+    <div className={className ?? 'min-h-layout-main'}>
+      <ChatInterface />
+    </div>
+  );
+}

apps/web/src/components/views/chat-view/ChatViewSkeleton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function ChatViewSkeleton() {
+  return (
+    <div className="min-h-layout-main flex flex-col p-4 space-y-4">
+      <div className="flex items-center gap-2 pb-2 border-b border-kodo-steel/50">
+        <Skeleton className="h-8 w-8 rounded-full" />
+        <Skeleton className="h-5 w-32" />
+      </div>
+      <div className="flex-1 space-y-2">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <Skeleton key={i} className="h-14 w-full max-w-md rounded-xl" />
+        ))}
+      </div>
+      <Skeleton className="h-12 w-full rounded-xl" />
+    </div>
+  );
+}

apps/web/src/components/views/chat-view/index.ts

@@ -0,0 +1,3 @@
+export { ChatView } from './ChatView';
+export { ChatViewSkeleton } from './ChatViewSkeleton';
+export type { ChatViewProps } from './types';

apps/web/src/components/views/chat-view/types.ts

@@ -0,0 +1,4 @@
+export interface ChatViewProps {
+  /** Optional className for the container. */
+  className?: string;
+}