feat(frontend): Scholarchat-inspired UI refactor with top nav, sidebar, and message actions

- Add TopNav component with AI Chat, Study Guides, Progress tabs - Refactor sidebar to include brand, new chat, subjects, chat history, settings - Add message action buttons (Helpful, Note, Deeper) on assistant responses - Enhance ChatInput with photo, mic attachment icons and AI disclaimer - Improve welcome state with 2x2 suggested prompt grid - Update global layout for proper sidebar offset (fix nav overlap) - Remove obsolete Header component - All styles: strict BEM naming, zero inline CSS, Paper Look theme
2026-08-14 08:07:42 -04:00
commit c9085bdefb
35 changed files with 4907 additions and 0 deletions
@@ -0,0 +1,71 @@
+/* ========================================
+   App Component — padhLe
+   ======================================== */
+
+import { useState } from "react";
+import "./styles/App.css";
+import Sidebar from "./components/sidebar/Sidebar";
+import TopNav from "./components/top-nav/TopNav";
+import ChatHistory from "./components/chat-history/ChatHistory";
+import ChatInput from "./components/chat-input/ChatInput";
+
+function App() {
+  const [messages, setMessages] = useState([]);
+  const [activeSubject, setActiveSubject] = useState("science");
+  const [activeChat, setActiveChat] = useState(null);
+  const [activeTab, setActiveTab] = useState("chat");
+
+  const handleSend = (text) => {
+    if (!text.trim()) return;
+
+    // Add user message
+    setMessages((prev) => [...prev, { id: Date.now(), role: "user", text }]);
+
+    // TODO: Send to backend and get AI response
+    // Simulating AI response for now
+    setTimeout(() => {
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: Date.now() + 1,
+          role: "assistant",
+          text: "This is a simulated response. Connect the backend to get real AI answers!",
+        },
+      ]);
+    }, 1000);
+  };
+
+  const handlePromptClick = (promptText) => {
+    handleSend(promptText);
+  };
+
+  return (
+    <div className="page">
+      {/* Left Sidebar — brand, subjects, chat history, settings */}
+      <Sidebar
+        activeSubject={activeSubject}
+        onSubjectChange={setActiveSubject}
+        activeChat={activeChat}
+        onChatSelect={setActiveChat}
+      />
+
+      <div className="page__main">
+        {/* Top Navigation — tabs + actions */}
+        <TopNav activeTab={activeTab} onTabChange={setActiveTab} />
+
+        {/* Chat Area */}
+        <div className="main-content">
+          <ChatHistory
+            messages={messages}
+            onPromptClick={handlePromptClick}
+          />
+        </div>
+
+        {/* Input Bar */}
+        <ChatInput onSend={handleSend} />
+      </div>
+    </div>
+  );
+}
+
+export default App;