The four welcome cards varied in shape and typography: the grid
produced a 3+1 orphan layout at wide widths, sub text was
single-line ellipsized (the updates card ended mid-sentence with
"…"), the Network card's values used a different size than the
other cards' sub text, and only the clickable cards carried a
chevron circle.
- Grid is now a symmetric 2×2 at wide widths (equal-height rows);
the three-card Desktop-only role renders one balanced row
- Card sub text wraps instead of being cut off — "Sovran_SystemsOS
keeps itself current" is fully visible at every width
- One type scale across all cards: 0.9rem titles, 0.8rem sub text
(Network values aligned to it), 46px chips, uniform min-height
- Chevron circles removed from the cards — hover/focus lift is the
click affordance, and every card has the same shape
- The updates card now reflects the real update state (failed,
restart required, running) instead of only "updates available";
it can no longer claim up-to-date while a restart is pending
Systems Operational on roles with no enabled domain services (a
fresh Desktop-only install, or everything turned off) rendered no
Router card but still showed a "Who uses these ports" note listing
services the machine does not have. Any role with no enabled domain
service now gets the calm "No router setup needed yet" card with
role-appropriate wording, and the who-uses note only appears when
a domain service is actually enabled.
Narrow viewports (phones, half-screen RDP) had no layout at all:
the sidebar and topbar forced ~900px of horizontal scroll on every
role. The sidebar now collapses to a 76px icon rail below 920px,
the topbar wraps its search onto a second row below 640px, and the
welcome column reflows to one card per row. Legacy pre-redesign
media rules in onboarding.css (which targeted the old DOM and set
.sidebar{width:100%}) are removed — they silently overrode the new
layout, and one shrank the Zeus QR to 200px; QR codes keep their
repo-original 240px at every width.
Loading indicator:
- Branded boot splash (Hub logo inside an accent spinner ring,
"Starting The Hub") covers the shell while the first services
data loads, then fades out once the welcome dashboard has
rendered; never blocks longer than 25s and reassures the user
after 8s (message about post-reboot delays)
- Fire the network and update checks before the first services
render so the dashboard cards are current at first paint
- Sidebar Update button now adopts the last known update state
when built (order-independent), and the welcome dashboard
re-renders when the update state changes
Icons:
- New monochrome g-pulse glyph (activity line) for Systems
Operational: welcome card, dialog header, and System Status
section — the shield no longer doubles as Security
- Tech Support / Security dialog header gets a standard chip;
Security shows the shield chip with a plain "Security" title
(no emoji), and the shared dialog title now resets correctly
when reopening Tech Support after Security
Replace the All Services grid as the landing view with a
Nextcloud-style welcome dashboard:
- Greeting (time-of-day), "Welcome to Your Sovereign Digital &
Financial Life" headline, version + role meta line
- Status cards: Systems Operational, Network (LAN/WAN/hostname),
Bitcoin sync progress with ETA, and available-updates card
- Calm drifting orb background animation (transform-only,
disabled under prefers-reduced-motion)
- Services grid stays mounted but hidden until the user browses
(Browse button, search, or a nav category); Dashboard nav item
returns to the welcome view
- Move role badge and autolaunch preference out of the sidebar;
autolaunch toggle now lives in the Systems Operational modal
- Remove LAN/WAN chip from the topbar; IPs live on the Network card
- One "Bitcoin" category: the service catalog distinguishes bitcoin-base
from bitcoin-apps, which surfaced as two sidebar menus and two tile
sections. The Hub now normalizes both into a single "Bitcoin" category
(nav item with combined count, one tile section). CATEGORY_ALIASES in
constants.js maps the catalog keys; server config sends one
("bitcoin", "Bitcoin") entry and the node role allowlist is updated
to match. The nix catalog is unchanged.
- "Self-Hosted Apps" is now "Personal Apps" — every service here is
self-hosted, so the label added no distinction.
- Restart and retry actions (topbar Reboot, Restart Entire System in the
update and rebuild dialogs and the restart confirmation, Retry Update,
Try Again) are now blue instead of amber — amber read as an error.
Status pills keep their semantic colors (amber = restart required).
- The service-modal domain section is no longer a checklist: it is titled
"Domain Status" and shows a single green "Domain is active" line with
the domain (or the backend's not-configured detail and Configure
Domain action when there is no domain yet). No "Step 1" wording.
- Systems Operational keeps the complexity hidden: the Router card now
shows just a verdict — green "Ports 80 and 443 are open" or red
"Ports 80 and 443 are not open" — derived from the same live backend
diagnostics. Port-forwarding instructions are gone (onboarding covers
them); on the Node-only role the card still explains that ports only
matter once BTCPay Server or Lightning Wallet Connections (LNURL) is
enabled.
Eight fixes from live testing:
Systems Operational modal:
- Drop the "test from your phone on mobile data" (hairpin NAT) sentence
from the router note — too technical for the intended audience.
- Node-only role: when BTCPay Server and Lightning Wallet Connections
(LNURL) are both off, the router card becomes a simple "No router
setup needed yet" note explaining that ports 80/443 only matter if
one of those services is turned on. When one is enabled, the card
shows the same port steps and live domain/port diagnostics as the
Desktop + Server role (diagnostics now poll only enabled services).
Service modals:
- The Domain Diagnostic Checklist now shows only the domain-active
step (Domain Configured). DNS and port diagnostics live in Systems
Operational, which shows the full checklist.
- Node-only role: BTCPay Server and Lightning Wallet Connections
modals gain a "Ports to Forward in Your Router" section with the
standard 80/443 wording and this computer's LAN address.
- Domain setup and reconfigure dialogs no longer contain router
port-forwarding instructions (already handled during Desktop +
Server onboarding and shown in Systems Operational).
Lightning Wallet Connections:
- Refresh and New Wallet toolbar buttons now share one height and
baseline (a leftover 12px top margin on Refresh was offsetting it).
- The header status chip has a proper gap between the status dot and
its label.
Zeus Connect / QR codes:
- QR codes render at the original 240px with the white frame and
pixelated upscaling, restoring scannability.
Brand:
- The sidebar logo loads via /static/sovran-hub-icon.svg (same as the
login page) instead of an inline <use> symbol — the gradient-heavy
symbol did not render reliably. The icon sprite is hidden with the
browser-safe zero-size pattern instead of display:none.
Apply the approved "The Hub" redesign to the web admin while keeping every
existing mechanic intact (polling, service-detail modals, Matrix and system
password management, NWC wallet manager, update/rebuild/backup/security/
reboot flows, feature manager, onboarding, role handling).
Layout (templates/index.html):
- Old header bar + IP bar replaced by a sidebar + topbar app shell.
Sidebar carries the brand (The Hub / Sovran_SystemsOS version), category
navigation with live counts, the System actions (Update System, Tech
Support, Manual Backup, Security, node-only Upgrade), Feature Manager /
Preferences, and the role badge.
- Topbar carries the page title, a service search box, the LAN | WAN
network chip (external IP always visible, one line), Reboot and Sign Out.
- New widgets row: Systems Operational summary (opens the new Systems
Operational modal) and Bitcoin Core sync progress with block/ETA.
- New Systems Operational modal: service counts, router port-forwarding
steps (80/443 to this machine's LAN IP), the live domain diagnostics
checklist, and which services use those ports.
New static/js/dashboard.js (namespaced IIFE, no new globals) renders the
nav, search filtering, widgets, and the Systems Operational modal; it is
driven by the existing /api/services payloads via a
window.dashboardServicesUpdated() hook called from buildTiles/updateTiles.
Visual design (static/css/*):
- New token set (softer dark surfaces, lifted contrast, Sovran green
reserved for status and actions) with legacy variable names aliased so
every secondary sheet re-skins automatically.
- Tiles, dialogs, buttons, inputs, toggles, tables, forms, overlays and
the login page restyled to the GNOME/libadwaita-flavored surfaces:
20px cards, 26px dialogs, pill buttons, libadwaita switches, mono value
pills with Copy buttons, consistent modal anatomy.
- Inline SVG symbol set for chrome/nav icons (monochrome, currentColor);
service icons still load from /static/icons/*.svg as before.
- Sidebar system buttons now use vector glyphs instead of emoji.
Behavioral details:
- Service detail modal header gains a status pill next to the version
chip; credentials render with pre-wrap for multiline values.
- First-login security banner now renders as a card inside the content
area instead of a full-width strip above the app.
- Search + category filtering hide/show sections and tiles without
touching the polling or update logic.
Onboarding and login pages rebranded to "The Hub" with aligned palette.
naturallaw777