refactor: redesign UI to match EduAI Refined Workspace

- Replace Bauhaus aesthetic with Material Design 3-inspired layout
- Add working grade/subject/chapter dropdown selectors with placeholder options
- Fix ChatInput layout: remove position:absolute, use flex column flow
- Update sidebar with Material Icons, upgrade card, and clean hover states
- Add TopNav dropdowns with click-outside-to-close behavior
- Modernize message bubbles, action buttons, and welcome state
- Replace SVG icons with Material Symbols throughout
- Apply consistent BEM naming, CSS custom properties, no inline styles

frontend/src/App.jsx

@@ -1,9 +1,8 @@
 /* ========================================
-   App Component — padhLe
+   App Component — padhle (Refined Workspace)
    ======================================== */
 
 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";
@@ -11,19 +10,16 @@ import ChatInput from "./components/chat-input/ChatInput";
 
 function App() {
   const [messages, setMessages] = useState([]);
-  const [activeSubject, setActiveSubject] = useState("science");
+  const [activeSubject, setActiveSubject] = useState("Choose Subject");
   const [activeChat, setActiveChat] = useState(null);
-  const [activeTab, setActiveTab] = useState("chat");
-  const [greetingDismissed, setGreetingDismissed] = useState(false);
+  const [activeGrade, setActiveGrade] = useState("Choose standard");
+  const [activeChapter, setActiveChapter] = useState("Choose Chapter");
 
   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,
@@ -42,7 +38,6 @@ function App() {
 
   return (
     <div className="page">
-      {/* Left Sidebar — brand, subjects, chat history, settings */}
       <Sidebar
         activeSubject={activeSubject}
         onSubjectChange={setActiveSubject}
@@ -51,33 +46,29 @@ function App() {
       />
 
       <div className="page__main">
-        {/* Top Navigation — tabs + actions */}
-        <TopNav activeTab={activeTab} onTabChange={setActiveTab} />
+        <TopNav
+          activeGrade={activeGrade}
+          onGradeChange={setActiveGrade}
+          activeSubject={activeSubject}
+          onSubjectChange={setActiveSubject}
+          activeChapter={activeChapter}
+          onChapterChange={setActiveChapter}
+        />
 
-        {/* Chat Area */}
         <div className="main-content">
-          {!greetingDismissed && messages.length === 0 && (
-            <div className="greeting-banner">
-              <h2 className="greeting-banner__title">Welcome to padhLe 📚</h2>
-              <p className="greeting-banner__tagline">Let's make today a great day for learning.</p>
-              <button
-                className="greeting-banner__dismiss"
-                onClick={() => setGreetingDismissed(true)}
-              >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M18 6L6 18M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-          )}
           <ChatHistory
             messages={messages}
+            activeSubject={activeSubject}
+            activeGrade={activeGrade}
+            activeChapter={activeChapter}
             onPromptClick={handlePromptClick}
           />
         </div>
 
-        {/* Input Bar */}
-        <ChatInput onSend={handleSend} />
+        <ChatInput
+          onSend={handleSend}
+          placeholder={`Ask anything about ${activeGrade} ${activeSubject} – ${activeChapter}...`}
+        />
       </div>
     </div>
   );