feat: Add responsive navigation and theme selection

- Implemented adaptive navigation (Sidebar for wide screens, Bottom Nav for narrow screens)
- Added manual theme selection (Light/Dark/System)
- Added accent color selection
- Created ThemeProvider for dynamic styling
- Added Settings page
- Refactored Profile page with Quick Access links

Fixes #2
Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/Profile.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { Profile as ProfileType } from '../types/api';
-import { useStore } from '../store/useStore';
-import { useNavigate } from 'react-router-dom';
-import { LogOut, User, Mail, GraduationCap, Users } from 'lucide-react';
+import { useNavigate, Link } from 'react-router-dom';
+import { User, Mail, GraduationCap, Users, Calendar, GraduationCap as GradesIcon, MessageSquare, Settings } from 'lucide-react';
 
 export const Profile: React.FC = () => {
   const [profile, setProfile] = useState<ProfileType | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
-  const { reset } = useStore();
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -30,11 +28,6 @@ export const Profile: React.FC = () => {
     fetchProfile();
   }, [navigate]);
 
-  const handleLogout = () => {
-    reset();
-    navigate('/login');
-  };
-
   if (loading) return <div style={{ padding: '20px', textAlign: 'center' }}>Loading profile...</div>;
   if (error) return (
     <div style={{ padding: '20px', textAlign: 'center', color: 'var(--md-sys-color-error)' }}>
@@ -48,18 +41,14 @@ export const Profile: React.FC = () => {
 
   return (
     <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+      <div style={{ marginBottom: '24px' }}>
         <h1>Profile</h1>
-        <button onClick={handleLogout} className="m3-button m3-button-tonal">
-          <LogOut size={18} style={{ marginRight: '8px' }} />
-          Logout
-        </button>
       </div>
 
       {profile && (
         <div className="m3-card">
           <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-            <User size={24} style={{ marginRight: '16px' }} />
+            <User size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
             <div>
               <div style={{ fontSize: '12px', opacity: 0.7 }}>Full Name</div>
               <div style={{ fontSize: '18px', fontWeight: 500 }}>{profile.fullName}</div>
@@ -68,7 +57,7 @@ export const Profile: React.FC = () => {
 
           {profile.email && (
             <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <Mail size={24} style={{ marginRight: '16px' }} />
+              <Mail size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
               <div>
                 <div style={{ fontSize: '12px', opacity: 0.7 }}>Email</div>
                 <div>{profile.email}</div>
@@ -78,7 +67,7 @@ export const Profile: React.FC = () => {
 
           {profile.group && (
             <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <Users size={24} style={{ marginRight: '16px' }} />
+              <Users size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
               <div>
                 <div style={{ fontSize: '12px', opacity: 0.7 }}>Group</div>
                 <div>{profile.group}</div>
@@ -88,7 +77,7 @@ export const Profile: React.FC = () => {
 
           {profile.faculty && (
             <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <GraduationCap size={24} style={{ marginRight: '16px' }} />
+              <GraduationCap size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
               <div>
                 <div style={{ fontSize: '12px', opacity: 0.7 }}>Faculty</div>
                 <div>{profile.faculty}</div>
@@ -99,12 +88,24 @@ export const Profile: React.FC = () => {
       )}
 
       <div style={{ marginTop: '24px' }}>
-        <h2 style={{ fontSize: '18px', marginBottom: '16px' }}>Other Services</h2>
+        <h2 style={{ fontSize: '18px', marginBottom: '16px' }}>Quick Access</h2>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
-          <button className="m3-button m3-button-tonal" disabled>Schedule (Soon)</button>
-          <button className="m3-button m3-button-tonal" disabled>Grades (Soon)</button>
-          <button className="m3-button m3-button-tonal" disabled>Debts (Soon)</button>
-          <button className="m3-button m3-button-tonal" disabled>Messages (Soon)</button>
+          <Link to="/schedule" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
+            <Calendar size={24} />
+            Schedule
+          </Link>
+          <Link to="/grades" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
+            <GradesIcon size={24} />
+            Grades
+          </Link>
+          <Link to="/messages" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
+            <MessageSquare size={24} />
+            Messages
+          </Link>
+          <Link to="/settings" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
+            <Settings size={24} />
+            Settings
+          </Link>
         </div>
       </div>
     </div>

src/pages/Settings.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useStore } from '../store/useStore';
+import { Palette, Moon, Sun, Monitor, LogOut } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+const colors = [
+  { name: 'Blue', value: '#0061a4' },
+  { name: 'Red', value: '#ba1a1a' },
+  { name: 'Green', value: '#006d3a' },
+  { name: 'Purple', value: '#7c4dff' },
+  { name: 'Orange', value: '#8b5000' },
+];
+
+export const Settings: React.FC = () => {
+  const { theme, setTheme, seedColor, setSeedColor, reset } = useStore();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    reset();
+    navigate('/login');
+  };
+
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
+      <h1 style={{ marginBottom: '24px' }}>Settings</h1>
+
+      <section style={{ marginBottom: '32px' }}>
+        <h2 style={{ fontSize: '18px', marginBottom: '16px', display: 'flex', alignItems: 'center' }}>
+          <Palette size={20} style={{ marginRight: '12px' }} />
+          Theme
+        </h2>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px' }}>
+          <button
+            onClick={() => setTheme('light')}
+            className={`m3-button m3-button-tonal ${theme === 'light' ? 'active' : ''}`}
+            style={{ border: theme === 'light' ? '2px solid var(--md-sys-color-primary)' : 'none' }}
+          >
+            <Sun size={18} style={{ marginRight: '8px' }} />
+            Light
+          </button>
+          <button
+            onClick={() => setTheme('dark')}
+            className={`m3-button m3-button-tonal ${theme === 'dark' ? 'active' : ''}`}
+            style={{ border: theme === 'dark' ? '2px solid var(--md-sys-color-primary)' : 'none' }}
+          >
+            <Moon size={18} style={{ marginRight: '8px' }} />
+            Dark
+          </button>
+          <button
+            onClick={() => setTheme('system')}
+            className={`m3-button m3-button-tonal ${theme === 'system' ? 'active' : ''}`}
+            style={{ border: theme === 'system' ? '2px solid var(--md-sys-color-primary)' : 'none' }}
+          >
+            <Monitor size={18} style={{ marginRight: '8px' }} />
+            System
+          </button>
+        </div>
+      </section>
+
+      <section>
+        <h2 style={{ fontSize: '18px', marginBottom: '16px', display: 'flex', alignItems: 'center' }}>
+          <Palette size={20} style={{ marginRight: '12px' }} />
+          Accent Color
+        </h2>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+          {colors.map((c) => (
+            <button
+              key={c.value}
+              onClick={() => setSeedColor(c.value)}
+              style={{
+                width: '48px',
+                height: '48px',
+                borderRadius: '24px',
+                backgroundColor: c.value,
+                border: seedColor === c.value ? '4px solid var(--md-sys-color-on-surface)' : 'none',
+                cursor: 'pointer',
+                transition: 'transform 0.2s',
+              }}
+              title={c.name}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section style={{ marginTop: '48px', borderTop: '1px solid var(--md-sys-color-outline)', paddingTop: '24px' }}>
+        <button
+          onClick={handleLogout}
+          className="m3-button m3-button-tonal"
+          style={{ color: 'var(--md-sys-color-error)', width: '100%' }}
+        >
+          <LogOut size={18} style={{ marginRight: '8px' }} />
+          Logout from Session
+        </button>
+      </section>
+    </div>
+  );
+};