Added frontend code quality tooling with Prettier for formatting and ESLint for linting. Provides consistent code style enforcement for all HTML, JS, and CSS files.

• Defines prettier, eslint, and @eslint/js as dev dependencies
• npm scripts: format (write), format:check (read-only), lint (ESLint)
• Install: cd frontend && npm install

• 4-space indent, single quotes, trailing commas (ES5), semicolons
• printWidth: 80, arrowParens: "always"

• ESLint 9 flat config using @eslint/js recommended rules
• Browser globals + marked declared as read-only
• Rules: eqeqeq: error, no-unused-vars: warn, no-console: warn

• Excludes node_modules/

• Runs prettier --write on all frontend HTML/JS/CSS files
• Usage: ./scripts/frontend-format.sh

• Runs prettier --check + eslint without modifying files
• Exit code 0 = all checks pass; non-zero = issues found
• Usage: ./scripts/frontend-lint.sh

Applied Prettier-consistent formatting throughout:

• Trailing commas added to all multi-line object literals and function call arguments
• .map() chains reformatted with method chaining on separate lines
• Redundant inline comments removed (self-explanatory code)
• Consistent arrow function parentheses ((e) => not e =>)

cd frontend
npm install

Then use the scripts from the repo root:

./scripts/frontend-format.sh   # auto-fix formatting
./scripts/frontend-lint.sh     # check only (CI-safe)

Added a toggle button that allows users to switch between dark and light themes for the Course Materials Assistant application.

• Added a .header-content flex container to the <header> with .header-text on the left and the toggle button on the right
• Added #themeToggle button with inline sun and moon SVG icons and an aria-label attribute

• Dark theme (default) defined on :root
• Light theme defined on [data-theme="light"]
• .header-content uses display: flex; justify-content: space-between to push the toggle to the top-right
• .theme-toggle: circular 44×44 px button, border-radius: 50%, hover/focus/active states
• .sun-icon / .moon-icon: position: absolute siblings; the active icon has opacity: 1, scale(1), the inactive one has opacity: 0, rotate(±180deg) scale(0.8) — both animated with transition: all 0.3s ease
• body and * selectors carry transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease for smooth theme switching
• Responsive: on screens ≤ 768 px the header stacks vertically and the toggle aligns to the right

• themeToggle DOM reference added alongside other element refs
• initializeTheme() — reads localStorage.getItem('theme'), defaults to 'dark'
• toggleTheme() — reads the current data-theme attribute on document.documentElement and calls setTheme() with the opposite value
• setTheme(theme) — sets/removes data-theme="light" on <html>, updates aria-label, persists to localStorage
• Keyboard shortcut Ctrl/Cmd + Shift + T also calls toggleTheme()

Both themes share --primary-color: #2563eb, --primary-hover: #1d4ed8, --user-message: #2563eb, and --radius: 12px.

• Toggle button in top-right corner of header
• Sun (dark mode) / Moon (light mode) SVG icon pair with rotation + opacity animation
• Smooth 0.3 s transitions on all theme-sensitive properties
• data-theme attribute on <html> element drives all CSS variable overrides
• Theme preference persisted in localStorage; dark is the default for new visitors
• aria-label updates dynamically ("Switch to light/dark theme")
• Keyboard shortcut: Ctrl/Cmd + Shift + T
• Responsive layout — button remains accessible at all viewport sizes