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,48 @@
+/* ========================================
+   TopNav Component — padhLe
+   ======================================== */
+
+import "./TopNav.css";
+
+const TopNav = ({ activeTab, onTabChange }) => {
+  const tabs = [
+    { id: "chat", label: "AI Chat", icon: "💬" },
+    { id: "study", label: "Study Guides", icon: "📖" },
+    { id: "progress", label: "Progress", icon: "📊" },
+  ];
+
+  return (
+    <nav className="topnav">
+      <div className="topnav__tabs">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            className={`topnav__tab ${
+              activeTab === tab.id ? "topnav__tab--active" : ""
+            }`}
+            onClick={() => onTabChange(tab.id)}
+          >
+            <span className="topnav__icon">{tab.icon}</span>
+            <span className="topnav__label">{tab.label}</span>
+          </button>
+        ))}
+      </div>
+      <div className="topnav__actions">
+        <button className="topnav__action" aria-label="Search" title="Search">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="11" cy="11" r="8" />
+            <path d="M21 21l-4.35-4.35" />
+          </svg>
+        </button>
+        <button className="topnav__action" aria-label="Notifications" title="Notifications">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+          </svg>
+        </button>
+      </div>
+    </nav>
+  );
+};
+
+export default TopNav;