refactor: split WorkspaceDashboard into focused sub-components

Extract WorkspaceDashboard.tsx (642→219 lines) into workspace/ directory:
- WorkspaceHeader: header with lawyer info and close button
- WorkspaceSidebar: navigation with stats
- OverviewView: welcome banner, case summary, quick actions
- FilesView: file management with categories
- ChatView: live chat interface
- TimelineView: activity timeline
- SettingsView: privacy and notification settings
- workspaceUtils: helper functions (formatFileSize, getAIResponse)

Part of P2 - Large Component Breakdown

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: catomean

app/bots/legal-expert/components/demo/WorkspaceDashboard.tsx

@@ -46,3 +46,23 @@ export interface WorkspaceSection {
   files: UploadedFile[];
   aiSuggestion?: string;
 }
+
+// Workspace Dashboard types
+export interface ChatMessage {
+  id: string;
+  sender: string;
+  senderName: string;
+  avatar: string;
+  content: string;
+  timestamp: Date;
+}
+
+export interface CategoryWithFiles {
+  id: string;
+  title: string;
+  icon: string;
+  files: UploadedFile[];
+  count: number;
+}
+
+export type WorkspaceViewMode = 'overview' | 'files' | 'chat' | 'timeline' | 'settings';

app/bots/legal-expert/components/demo/types.ts

@@ -0,0 +1,81 @@
+import { type FC } from 'react';
+import { type ChatMessage, type LawyerProfile } from '../types';
+
+interface ChatViewProps {
+  messages: ChatMessage[];
+  inputMessage: string;
+  setInputMessage: (msg: string) => void;
+  handleSendMessage: () => void;
+  isTyping: boolean;
+  lawyer: LawyerProfile;
+}
+
+export const ChatView: FC<ChatViewProps> = ({
+  messages,
+  inputMessage,
+  setInputMessage,
+  handleSendMessage,
+  isTyping,
+  lawyer,
+}) => {
+  return (
+    <div className="h-full flex flex-col bg-slate-800/50 backdrop-blur-xl rounded-2xl border border-slate-700">
+      <div className="px-6 py-4 border-b border-slate-700">
+        <h2 className="text-xl font-bold text-white">💬 Live Chat</h2>
+        <p className="text-sm text-slate-400">AI + {lawyer.username} • No appointments needed</p>
+      </div>
+
+      <div className="flex-1 overflow-auto p-6 space-y-4">
+        {messages.map((msg) => (
+          <div key={msg.id} className={`flex gap-3 ${msg.sender === 'user' ? 'justify-end' : ''}`}>
+            {msg.sender !== 'user' && (
+              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white flex-shrink-0">
+                {msg.avatar}
+              </div>
+            )}
+            <div
+              className={`max-w-md ${msg.sender === 'user' ? 'bg-blue-600' : 'bg-slate-700'} rounded-2xl px-4 py-3`}
+            >
+              <p className="text-xs text-slate-300 mb-1">{msg.senderName}</p>
+              <p className="text-white text-sm">{msg.content}</p>
+              <p className="text-xs text-slate-400 mt-1">{msg.timestamp.toLocaleTimeString()}</p>
+            </div>
+          </div>
+        ))}
+        {isTyping && (
+          <div className="flex gap-3">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
+              🤖
+            </div>
+            <div className="bg-slate-700 rounded-2xl px-4 py-3">
+              <div className="flex gap-1">
+                <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce" />
+                <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce delay-100" />
+                <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce delay-200" />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="p-4 border-t border-slate-700">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={inputMessage}
+            onChange={(e) => setInputMessage(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+            placeholder="Ask AI or your lawyer anything..."
+            className="flex-1 bg-slate-900 text-white px-4 py-3 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+          />
+          <button
+            onClick={handleSendMessage}
+            className="px-6 py-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg font-medium hover:shadow-lg transition-all"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

app/bots/legal-expert/components/demo/workspace/ChatView.tsx

@@ -0,0 +1,94 @@
+import { type FC } from 'react';
+import { type UploadedFile, type CategoryWithFiles } from '../types';
+import { formatFileSize } from './workspaceUtils';
+
+interface FilesViewProps {
+  categoriesWithFiles: CategoryWithFiles[];
+  selectedFile: string | null;
+  setSelectedFile: (id: string | null) => void;
+  onFileDelete: (fileId: string) => void;
+  onFileVisibilityChange: (fileId: string, visibility: string) => void;
+}
+
+export const FilesView: FC<FilesViewProps> = ({
+  categoriesWithFiles,
+  selectedFile,
+  setSelectedFile,
+  onFileDelete,
+  onFileVisibilityChange,
+}) => {
+  return (
+    <div className="space-y-6 animate-fadeIn">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold text-white">📁 File Management</h2>
+        <button className="px-4 py-2 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg font-medium hover:shadow-lg transition-all">
+          + Upload Files
+        </button>
+      </div>
+
+      {categoriesWithFiles.map((category) => (
+        <div
+          key={category.id}
+          className="bg-slate-800/50 backdrop-blur-xl rounded-2xl border border-slate-700 overflow-hidden"
+        >
+          <div className="px-6 py-4 bg-slate-900/50 border-b border-slate-700">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">{category.icon}</span>
+                <h3 className="text-lg font-bold text-white">{category.title}</h3>
+                <span className="text-xs bg-slate-700 text-slate-300 px-2 py-1 rounded-full">
+                  {category.count} files
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-4 space-y-2">
+            {category.files.map((file: UploadedFile) => (
+              <div
+                key={file.id}
+                className={`flex items-center gap-4 p-4 rounded-lg border transition-all ${
+                  selectedFile === file.id
+                    ? 'bg-blue-600/20 border-blue-500'
+                    : 'bg-slate-900/30 border-slate-700 hover:border-slate-600'
+                }`}
+              >
+                <div className="text-3xl">📄</div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-white font-medium truncate">{file.name}</p>
+                  <div className="flex items-center gap-4 mt-1">
+                    <span className="text-xs text-slate-400">{formatFileSize(file.size)}</span>
+                    <select
+                      value={file.visibility || 'private'}
+                      onChange={(e) => onFileVisibilityChange(file.id, e.target.value)}
+                      className="text-xs bg-slate-700 text-white px-2 py-1 rounded border border-slate-600"
+                    >
+                      <option value="private">🔒 Private</option>
+                      <option value="lawyer">👨‍⚖️ Lawyer Only</option>
+                      <option value="team">👥 Team</option>
+                      <option value="public">🌐 Public</option>
+                    </select>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => setSelectedFile(file.id)}
+                    className="p-2 hover:bg-slate-700 rounded-lg text-slate-400 hover:text-white transition-colors"
+                  >
+                    👁️
+                  </button>
+                  <button
+                    onClick={() => onFileDelete(file.id)}
+                    className="p-2 hover:bg-red-600/20 rounded-lg text-slate-400 hover:text-red-400 transition-colors"
+                  >
+                    🗑️
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

app/bots/legal-expert/components/demo/workspace/FilesView.tsx

@@ -0,0 +1,103 @@
+import { type FC } from 'react';
+import { type UploadedFile, type CategoryWithFiles, type WorkspaceViewMode } from '../types';
+
+interface OverviewViewProps {
+  files: UploadedFile[];
+  categoriesWithFiles: CategoryWithFiles[];
+  caseDescription: string;
+  setViewMode: (mode: WorkspaceViewMode) => void;
+}
+
+const QUICK_ACTIONS = [
+  { icon: '📁', title: 'Files', color: 'from-blue-500 to-cyan-500', view: 'files' as const },
+  { icon: '💬', title: 'Chat', color: 'from-purple-500 to-pink-500', view: 'chat' as const },
+  {
+    icon: '📅',
+    title: 'Timeline',
+    color: 'from-green-500 to-emerald-500',
+    view: 'timeline' as const,
+  },
+  {
+    icon: '⚙️',
+    title: 'Settings',
+    color: 'from-orange-500 to-red-500',
+    view: 'settings' as const,
+  },
+] as const;
+
+export const OverviewView: FC<OverviewViewProps> = ({
+  files,
+  categoriesWithFiles,
+  caseDescription,
+  setViewMode,
+}) => {
+  const getActionCount = (view: WorkspaceViewMode): string | number => {
+    switch (view) {
+      case 'files':
+        return files.length;
+      case 'chat':
+        return '24/7';
+      case 'timeline':
+        return 'Live';
+      case 'settings':
+        return 'Manage';
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <div className="space-y-6 animate-fadeIn">
+      {/* Welcome banner */}
+      <div className="bg-gradient-to-r from-blue-600 to-cyan-600 rounded-2xl p-6 text-white">
+        <h2 className="text-2xl font-bold mb-2">Welcome to Your Data Room 🚀</h2>
+        <p className="text-blue-100">
+          Your secure collaborative workspace is ready. All files are encrypted end-to-end.
+        </p>
+      </div>
+
+      {/* Case summary */}
+      <div className="bg-slate-800/50 backdrop-blur-xl rounded-2xl p-6 border border-slate-700">
+        <h3 className="text-lg font-bold text-white mb-3">📋 Case Summary</h3>
+        <p className="text-slate-300 text-sm leading-relaxed">{caseDescription}</p>
+      </div>
+
+      {/* Quick actions */}
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {QUICK_ACTIONS.map((action) => (
+          <button
+            key={action.title}
+            onClick={() => setViewMode(action.view)}
+            className="bg-slate-800/50 backdrop-blur-xl rounded-xl p-6 border border-slate-700 hover:border-slate-600 transition-all hover:scale-105 group"
+          >
+            <div
+              className={`text-4xl mb-3 bg-gradient-to-br ${action.color} bg-clip-text text-transparent`}
+            >
+              {action.icon}
+            </div>
+            <h4 className="text-white font-bold mb-1">{action.title}</h4>
+            <p className="text-slate-400 text-sm">{getActionCount(action.view)}</p>
+          </button>
+        ))}
+      </div>
+
+      {/* File categories preview */}
+      <div className="bg-slate-800/50 backdrop-blur-xl rounded-2xl p-6 border border-slate-700">
+        <h3 className="text-lg font-bold text-white mb-4">📂 File Categories</h3>
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
+          {categoriesWithFiles.map((cat) => (
+            <div key={cat.id} className="bg-slate-900/50 rounded-lg p-4 border border-slate-700">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-2xl">{cat.icon}</span>
+                <span className="text-xs bg-blue-600 text-white px-2 py-1 rounded-full">
+                  {cat.count}
+                </span>
+              </div>
+              <p className="text-sm text-white font-medium">{cat.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

app/bots/legal-expert/components/demo/workspace/OverviewView.tsx

@@ -0,0 +1,80 @@
+import { type FC } from 'react';
+import { type LawyerProfile } from '../types';
+
+interface SettingsViewProps {
+  lawyer: LawyerProfile;
+}
+
+interface TeamMember {
+  role: string;
+  access: string;
+  icon: string;
+}
+
+interface NotificationSetting {
+  label: string;
+  enabled: boolean;
+}
+
+export const SettingsView: FC<SettingsViewProps> = ({ lawyer }) => {
+  const teamMembers: TeamMember[] = [
+    { role: 'Owner (You)', access: 'Full Access', icon: '👤' },
+    { role: `Attorney (${lawyer.username})`, access: 'Full Access', icon: lawyer.avatar },
+    { role: 'Paralegal', access: 'Limited Access', icon: '📝' },
+    { role: 'Advisor', access: 'Read Only', icon: '👥' },
+  ];
+
+  const notificationSettings: NotificationSetting[] = [
+    { label: 'Email notifications', enabled: true },
+    { label: 'Push notifications', enabled: true },
+    { label: 'SMS alerts', enabled: false },
+  ];
+
+  return (
+    <div className="space-y-6 animate-fadeIn">
+      <h2 className="text-2xl font-bold text-white">⚙️ Workspace Settings</h2>
+
+      <div className="bg-slate-800/50 backdrop-blur-xl rounded-2xl p-6 border border-slate-700">
+        <h3 className="text-lg font-bold text-white mb-4">🔐 Privacy & Access Control</h3>
+        <div className="space-y-4">
+          {teamMembers.map((member) => (
+            <div
+              key={member.role}
+              className="flex items-center justify-between p-4 bg-slate-900/50 rounded-lg"
+            >
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">{member.icon}</span>
+                <div>
+                  <p className="text-white font-medium">{member.role}</p>
+                  <p className="text-sm text-slate-400">{member.access}</p>
+                </div>
+              </div>
+              <button className="text-sm text-blue-400 hover:text-blue-300">Edit</button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="bg-slate-800/50 backdrop-blur-xl rounded-2xl p-6 border border-slate-700">
+        <h3 className="text-lg font-bold text-white mb-4">🔔 Notifications</h3>
+        <div className="space-y-3">
+          {notificationSettings.map((setting) => (
+            <div
+              key={setting.label}
+              className="flex items-center justify-between p-3 bg-slate-900/50 rounded-lg"
+            >
+              <span className="text-white">{setting.label}</span>
+              <div
+                className={`w-12 h-6 rounded-full transition-colors ${setting.enabled ? 'bg-blue-600' : 'bg-slate-600'}`}
+              >
+                <div
+                  className={`w-5 h-5 bg-white rounded-full mt-0.5 transition-transform ${setting.enabled ? 'ml-6' : 'ml-0.5'}`}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};