add code and props for canvas

phd-advisor-frontend/src/App.js

@@ -3,6 +3,7 @@ import { ThemeProvider } from './contexts/ThemeContext';
 import HomePage from './pages/HomePage';
 import ChatPage from './pages/ChatPage';
 import AuthPage from './pages/AuthPage';
+import CanvasPage from './pages/CanvasPage';
 import './styles/components.css';
 
 function App() {
@@ -35,6 +36,16 @@ function App() {
     setCurrentView('auth');
   };
 
+  const navigateToCanvas = () => {
+    setCurrentView('canvas');
+  };
+
+  const navigateToChat = () => {
+    setCurrentView('chat');
+  };
+
+  
+
   const navigateToHome = () => {
     setCurrentView('home');
     setIsAuthenticated(false);
@@ -69,11 +80,20 @@ function App() {
         {currentView === 'auth' && (
           <AuthPage onAuthSuccess={handleAuthSuccess} />
         )}
+        {currentView === 'canvas' && isAuthenticated && (
+          <CanvasPage 
+            user={user}
+            authToken={authToken}
+            onNavigateToChat={navigateToChat}
+            onSignOut={handleSignOut}
+          />
+        )}
         {currentView === 'chat' && isAuthenticated && (
           <ChatPage 
             user={user}
             authToken={authToken}
             onNavigateToHome={navigateToHome}
+            onNavigateToCanvas={navigateToCanvas}
             onSignOut={handleSignOut}
           />
         )}

phd-advisor-frontend/src/components/Sidebar.js

@@ -10,7 +10,8 @@ import {
   User,
   Settings,
   ChevronLeft,
-  ChevronRight
+  ChevronRight,
+  FileText
 } from 'lucide-react';
 import '../styles/Sidebar.css';
 
@@ -23,7 +24,8 @@ const Sidebar = ({
   authToken,
   onSidebarToggle,
   isMobileOpen = false,
-  onMobileToggle
+  onMobileToggle,
+  onNavigateToCanvas
 }) => {
   const [chatSessions, setChatSessions] = useState([]);
   const [searchTerm, setSearchTerm] = useState('');
@@ -242,6 +244,14 @@ const Sidebar = ({
               >
                 <Plus size={20} />
               </button>
+              <button 
+                className="sidebar-canvas-btn"
+                onClick={onNavigateToCanvas}
+                title="PhD Canvas"
+              >
+                <FileText size={20} />
+                {!isCollapsed && <span>PhD Canvas</span>}
+              </button>
             </div>
           )}
         </div>

phd-advisor-frontend/src/pages/ChatPage.js

@@ -14,7 +14,7 @@ import '../styles/ChatPage.css';
 import '../styles/EnhancedChatInput.css';
 import AdvisorStatusDropdown from '../components/AdvisorStatusDropdown';
 
-const ChatPage = ({ user, authToken, onNavigateToHome, onSignOut }) => {
+const ChatPage = ({ user, authToken, onNavigateToHome, onNavigateToCanvas, onSignOut }) => {
   const [messages, setMessages] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [thinkingAdvisors, setThinkingAdvisors] = useState([]);
@@ -696,6 +696,7 @@ const handleNewChat = async (sessionId = null) => {
         onSidebarToggle={handleSidebarToggle}
         isMobileOpen={isMobileMenuOpen}
         onMobileToggle={setIsMobileMenuOpen}
+        onNavigateToCanvas={onNavigateToCanvas}
       />
       
       <div className={`main-chat-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>

phd-advisor-frontend/src/styles/Sidebar.css

@@ -636,6 +636,38 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
+.sidebar-canvas-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--feature-bg);
+  border: 1px solid var(--accent-primary);
+  border-radius: 8px;
+  color: var(--accent-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.sidebar-canvas-btn:hover {
+  background: var(--accent-primary);
+  color: white;
+  transform: translateY(-1px);
+}
+
+.sidebar.collapsed .sidebar-canvas-btn span {
+  display: none;
+}
+
+.sidebar.collapsed .sidebar-canvas-btn {
+  justify-content: center;
+  padding: 12px;
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .sidebar {