The feature/new-design branch has grown into a much larger update than a visual refresh. It reorganizes the app into clearer public, blog, labs, admin, and OS areas, adds a real CMS workflow backed by Firebase, introduces a protected media library, and expands the music tools into a more capable sound-design playground.
In total, this branch is 20 commits ahead of master, with changes landing across routing, authentication, Firebase Functions, blog publishing, media management, lab experiments, and audio tooling.
A Cleaner Site Structure
The app now has more intentional boundaries. Public pages, blog routes, labs, admin tools, and the core OS experience have been split into separate route groups, with shared route names centralized in one place.
- Public pages handle the homepage and blog.
- Labs hold experiments and component demos.
- Admin routes are protected and lazy-loaded.
- The OS keeps its own full-screen experience without the public site shell.
- The wildcard route now goes through a shared not-found component.
This also sets up the app for future growth. New sections can be added without tangling homepage demos, admin screens, and OS routes together.
A Global Header and Persistent Theme Toggle
The public side of the site now has a shared site header that appears across home, blog, labs, and admin routes while staying out of the immersive OS screens.
- Primary navigation for Home, Blog, and Labs.
- Admin, CMS, and Media links only when the signed-in user has admin claims.
- A direct OS launch action.
- A persistent light/dark theme toggle backed by localStorage.
- Theme-aware homepage imagery for day and night modes.
This is one of the branch's most visible design updates: the site now feels like one connected product instead of a set of separate experiments.
Firestore-Backed Blog Publishing
The blog is moving from static/local content toward a Firestore-backed publishing workflow. Public blog pages now load published posts from Firestore, sort by the intended posted date, and handle loading, empty, and error states.
- A public blog index.
- Individual post detail pages.
- Route-backed category pages at /blog/category/:category.
- Reusable post cards.
- Reusable share actions.
- Sanitized HTML rendering for titles, excerpts, and content blocks.
- Open Graph, Twitter, and canonical metadata for shared post links.
- Separate cover images and optional social share images.
The homepage also now points more directly into blog content, with read-more calls to action and blog cards that use the same sharing components.
A Real Admin CMS
The admin area now includes a CMS for creating and managing blog posts. The post editor supports metadata, SEO fields, status, tags, categories, posted dates, cover images, Open Graph images, and Editor.js content.
- New post creation at /admin/cms/new.
- Editing existing posts.
- Draft, scheduled, published, and archived statuses.
- Explicit publishedAt control for public ordering and metadata.
- JSON import and export for backup or migration.
- Firestore backup and restore controls.
- Post deletion handling.
- A richer post list with thumbnails, search, sorting, pagination, and bulk import.
The Editor.js integration is more complete now too. Image blocks are preserved more carefully, and CMS content is converted into public blog-renderer blocks when posts are published.
AI-Assisted Blog Drafting
The CMS now includes a writing assistant for blog metadata and thumbnail ideation. It can suggest titles, excerpts, SEO titles, SEO descriptions, categories, tags, and thumbnail prompts.
The assistant uses Firebase callable functions first, with OpenAI credentials stored in Firebase Secret Manager rather than Angular environment files. If the backend is unavailable, the editor can fall back to a deterministic local provider so the CMS remains usable during development.
There is also a server-backed thumbnail generation path. Generated images are stored in Firebase Storage under cms/blog-thumbnails/{slug}/, and the resulting URL can be applied to the post cover and social metadata fields.
Protected Admin Authorization
Admin access is now enforced through Firebase Auth custom claims instead of simple client-side checks.
- An AdminAuthGuard.
- Role-aware route data for admin sections.
- Google sign-in on the OS login screen.
- Popup login with redirect fallback.
- Safe redirect handling after login.
- Firebase Realtime Database, Firestore, and Storage rule updates.
- Callable Function admin checks.
- A trusted Admin SDK script for granting and revoking admin or named role claims.
Supported admin-capable claims include admin: true, cmsAdmin: true, and roles.admin: true. The structure also leaves room for future roles such as contentEditor.
Media Uploads and the Media Library Organizer
Media management is now a first-class admin feature. The CMS can upload manual blog media, optimize image files client-side when useful, preview uploaded media, and store assets in Firebase Storage under CMS-specific paths.
- Sidebar navigation.
- Search, sorting, and filtering.
- Grid, list, and compact views.
- Thumbnail sizing.
- Selection and batch actions.
- Preview dialogs.
- Metadata inspection.
- Tag editing.
- Batch rename flows.
- Resize request dialogs.
- Upload, loading, empty, error, and status states.
Importantly, the media library is built as a feature layer over existing Firebase services. It does not introduce a separate upload pipeline. Blog cover images, Open Graph images, and inline Editor.js image blocks are derived into globally manageable media records so older CMS attachments can become visible in the organizer.
Rename operations update metadata display names rather than moving Storage objects, and archive/delete operations are metadata-first unless a future physical deletion policy is added.
Labs Become Their Own Area
The homepage has been simplified into a focused hub for work, blog posts, labs, and the OS launch entry. The experimental project demos that used to live directly on the homepage now live under /labs.
- A public /labs route.
- A labs index.
- Wrapped component demos for SpaceX, Weather, Patch Studio, MIDI Sequencer, Task App, Tooltip Examples, and Tailwind Preview.
- Deferred mounting so demo services and side effects do not all start on initial page load.
- A dedicated full-screen background lab route.
The background lab itself was rebuilt with scroll-reactive sections and a hidden video trigger at the bottom of the page.
Bigger Music Tools
The music apps received one of the largest feature expansions in the branch.
- A selectable sound driver model.
- The existing Web Audio synth driver.
- An experimental Tone.js sampled preset driver.
- A SoundFont General MIDI sampled driver.
- Categorized instrument presets across keys, guitars, organs, strings, pads, bass, bells, mallets, and leads.
- Reusable synth factory presets.
- Patch save, load, duplicate, delete, and generation flows.
- Filter, LFO, delay, oscillator pan, octave, and master synth settings.
The patch builder also gets a richer studio UI, chord and sequence preview modes, and a keyboard tester.
A new MIDI sequencer app adds multi-channel step sequencing with tempo, bar length, resolution controls, per-channel presets, sound drivers, mute states, note selection, and playback through the patch service.
The piano component was refactored around patch-aware playback, octave/range controls, responsive horizontal scrolling, and shared keyboard-controller behavior.
Modernized Angular and Tooling
- Angular packages are on version 22.
- TypeScript moves to the 6.0 range.
- Firebase is updated to version 12.
- Node engine expectations are updated.
- ESLint configuration is adjusted.
- Firebase Functions get their own package, lockfile, TypeScript config, and scripts.
- Environment and deployment documentation now covers Firebase secrets, Functions, Firestore, Database, and Storage.
There is also new project documentation around architecture, media library design, development setup, environment secrets, roadmap items, and specialized agent instructions for documentation, QA, refactoring, and UI work.
Testing and Maintenance Work
Alongside the feature work, the branch adds and updates focused specs for routing, app shell behavior, blog repositories, blog rendering, CMS assistant services, media-adjacent flows, labs, social links, typewriter behavior, SpaceX components, the piano, patch services, and the new MIDI sequencer.
Many components also moved to eager change detection, and several shared services were refactored to better support optional Firebase providers, Firestore-only blog storage, and cleaner public/admin boundaries.
The Big Picture
This branch turns the site into a more complete publishing and experimentation platform.
The public side gets a clearer information architecture, shared navigation, persistent theming, category-backed blog discovery, and better social metadata. The admin side gets real authentication, CMS post management, AI-assisted metadata, media uploads, and a full media organizer. The labs and music tools become more isolated, more performant, and more interesting to explore.
There is still backend configuration to wire up before every production feature is live, especially Firebase secrets, custom claims, Storage rules, and callable Functions. But the foundation is now in place for a site that can publish, organize, experiment, and evolve without each new feature having to fight the old structure.