Add avatar upload to Settings, document Settings page, update README

- Profile section: click avatar to upload a personal photo (FileReader
  preview, hover camera icon overlay), replacing static initials
- README.md rewritten with project-specific page status table, dev
  setup, tech stack, and deployment notes
- design-decisions.md: add Settings Page subsection documenting layout,
  section-switching, and the avatar upload technique

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF

2026-06-18 18:50:43 +00:00

1.9 KiB

Raw Blame History

ArchNest

A self-hosted ops dashboard — infrastructure monitoring, a bookmark hub for your homelab/cloud links, an embedded terminal, and system settings, all in one place.

Built with React 19 + TypeScript + Vite, styled with Tailwind CSS v4, charts via Recharts, icons via Lucide React.

Pages

Page	Route	Status
Glance	`/`	Done — main ops dashboard (system status, resource overview, alerts, network traffic)
Infrastructure	`/infrastructure`	Done — resource distribution, node status grid, cost/trend breakdown. "Network" sub-tab planned as a future addition.
BookNest	`/booknest`	Done — categorized bookmark hub with quick access, favorites, link health, and category breakdown
Terminal	`/terminal`	Pending — will be based on a fork of the (archived) Termix project, not yet merged in
Settings	`/settings`	Done — Profile (incl. avatar upload), Appearance, Integrations, Notifications, Data & Backup, About

See archnest-blueprint.md for the original per-page design spec and design-decisions.md for the visual/UX conventions and lessons learned while building each page — read that file before making layout changes, it documents why things are built the way they are (hero banner layering, card blend techniques, icon library gotchas, etc.).

Development

npm install
npm run dev

Type-check with npx tsc --noEmit before committing — Vite/the browser surface some runtime errors (e.g. missing icon exports) that the type-checker won't catch, so also smoke-test pages in a browser.

Tech Stack

React 19 + Vite + TypeScript
React Router for routing
Tailwind CSS v4
Recharts (donuts, line/area charts)
Lucide React (icons)
Deploy target: Docker on racknerd1 → NPM proxy at archnest.snsnetlabs.com

Deployment

This project is deployed via Docker on racknerd1, proxied through Nginx Proxy Manager at archnest.snsnetlabs.com.