feat(ui): implement light mode, cross-tab auth sync, and QPU deletion

Author: Tinitto

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project follows versions of format `{year}.{month}.{patch_number}`.
 
 ## [Unreleased]
+### Added
+- Light mode support for the dashboard UI with a theme toggle. Dark mode remains the default.
+- Cross-tab authentication logout synchronization using `pb.authStore.onChange`.
+- Ability for administrators to delete QPUs from the QPU Registry with a confirmation modal.
 
 ### Added
 

README.md

@@ -333,8 +333,7 @@ make clean
 
 ## TODOs
 
-- [ ] Implement a light mode in the dashboard and improve the overall dark mode UI.
-- [ ] Fix authentication routing: ensure super users can sign in at the `/dashboard` (especially when `passwordAuth` is disabled in `qpi.config.yml`), rather than being restricted to the default PocketBase `/_/` dashboard.
+- [x] Implement a light mode in the dashboard and improve the overall dark mode UI.
 - [ ] Add a way of translating the configuration files (calib seed etc.) of tergite to the quantify.device.yml of this one
 - [ ] Share this library in quantum journals, Euro projects, etc.  
 - [ ] On the QPU Registry screen for admins, we probably need an option to delete any of the QPUs (with a confirmation modal first of course)

e2e/test_dashboard_cypress.sh

@@ -34,7 +34,7 @@ sleep 2
 
 status=0
 echo "[e2e] Executing Cypress spec tests..."
-(cd "${PROJECT_ROOT}/qpi-ui/internal/dashboard" && npx cypress run) || status=$?
+(cd "${PROJECT_ROOT}/qpi-ui/internal/dashboard" && npx cypress run "$@") || status=$?
 
 stop_driver
 stop_pocketbase

qpi-ui/internal/dashboard/cypress/e2e/overview-header/theme-toggle.cy.ts

@@ -0,0 +1,49 @@
+describe("Overview Header — Theme Toggle", () => {
+  beforeEach(() => {
+    // Clear storage and cookies so we always start fresh
+    cy.clearCookies();
+    cy.clearLocalStorage();
+    
+    // Log in as an admin for testing header
+    cy.visit("/", {
+      onBeforeLoad: (win) => {
+        // We do not set any theme in localStorage, so it should default to dark
+        // Mock prefers-color-scheme to light just to prove our code defaults to dark anyway
+        cy.stub(win, 'matchMedia').withArgs('(prefers-color-scheme: dark)').returns({ matches: false, addEventListener: () => {}, removeEventListener: () => {} });
+      }
+    });
+    cy.contains("button", "Administrator").click();
+    cy.get('input[type="text"]').clear().type("admin@example.com");
+    cy.get('input[type="password"]').clear().type("supersecretpassword1234");
+    cy.get('button[type="submit"]').click();
+
+    // Verify dashboard is loaded
+    cy.contains("h1", "QPI Interface").should("be.visible");
+  });
+
+  it("defaults to dark mode (has dark class on HTML)", () => {
+    // We expect dark mode to be default regardless of OS theme
+    cy.get('[data-testid="theme-toggle"]').should("be.visible");
+    cy.get("html").should("have.class", "dark");
+  });
+
+  it("toggles the 'dark' class on the HTML element and persists it", () => {
+    // 1. Initial State: Should be dark mode
+    cy.get("html").should("have.class", "dark");
+    cy.window().its("localStorage").invoke("getItem", "theme").should("be.null");
+
+    // 2. Click Toggle: Should switch to light mode
+    cy.get('[data-testid="theme-toggle"]').click();
+    cy.get("html").should("not.have.class", "dark");
+    cy.window().its("localStorage").invoke("getItem", "theme").should("eq", "light");
+
+    // 3. Reload Page: Should stay in light mode
+    cy.reload();
+    cy.get("html").should("not.have.class", "dark");
+
+    // 4. Click Toggle Again: Should switch back to dark mode
+    cy.get('[data-testid="theme-toggle"]').click();
+    cy.get("html").should("have.class", "dark");
+    cy.window().its("localStorage").invoke("getItem", "theme").should("eq", "dark");
+  });
+});

qpi-ui/internal/dashboard/cypress/e2e/qpu-registry/admin-delete.cy.ts

@@ -49,7 +49,7 @@ describe("QPU Registry — Admin: Delete QPU", () => {
 
     // Find the newly created QPU card by its name, and click its Delete button
     cy.contains("h3", qpuToDelete)
-      .parents("div.bg-zinc-900") // find the card container
+      .parents("div.bg-white") // find the card container
       .contains("button", "Delete")
       .click();
 

qpi-ui/internal/dashboard/src/App.tsx

@@ -493,7 +493,7 @@ export const App: React.FC = () => {
             onRejectRequest={handleRejectRequest}
           />
         ) : (
-          <div className="text-zinc-500">Access Denied.</div>
+          <div className="text-gray-400 dark:text-zinc-500">Access Denied.</div>
         );
       case "settings":
         return (

qpi-ui/internal/dashboard/src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import { Bell, X, Info, AlertTriangle, Settings, LogOut } from "lucide-react";
 import type { Notification } from "../types";
+import { ThemeToggle } from "./ThemeToggle";
 
 interface HeaderProps {
   pageTitle: string;
@@ -52,8 +53,8 @@ export const Header: React.FC<HeaderProps> = ({
   };
 
   return (
-    <header className="h-16 border-b border-zinc-800 flex items-center justify-between px-8 bg-zinc-950/20 z-40">
-      <h2 className="font-geist text-lg font-bold text-white capitalize">
+    <header className="h-16 border-b border-gray-200 dark:border-zinc-800 flex items-center justify-between px-8 bg-gray-50 dark:bg-zinc-950/20 z-40">
+      <h2 className="font-geist text-lg font-bold text-gray-900 dark:text-white capitalize">
         {pageTitle === "qpus"
           ? "QPU Registry"
           : pageTitle === "jobs"
@@ -66,7 +67,7 @@ export const Header: React.FC<HeaderProps> = ({
           <button
             aria-label="Notifications"
             onClick={() => setDropdownOpen(!dropdownOpen)}
-            className="w-9 h-9 rounded-full bg-zinc-900 border border-zinc-800 hover:bg-zinc-800 text-zinc-400 hover:text-white transition-all flex items-center justify-center relative focus:outline-none"
+            className="w-9 h-9 rounded-full bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 hover:bg-gray-100 dark:bg-zinc-800 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:text-white transition-all flex items-center justify-center relative focus:outline-none"
           >
             <Bell className="w-5 h-5" />
             {notifications.length > 0 && (
@@ -78,9 +79,9 @@ export const Header: React.FC<HeaderProps> = ({
 
           {/* Dropdown panel */}
           {dropdownOpen && (
-            <div className="absolute right-0 mt-2 w-80 bg-zinc-900 border border-zinc-800 rounded-lg shadow-2xl p-4 space-y-3 z-[100]">
-              <div className="flex justify-between items-center border-b border-zinc-800 pb-2">
-                <span className="text-xs font-semibold text-white uppercase tracking-wider">
+            <div className="absolute right-0 mt-2 w-80 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-2xl p-4 space-y-3 z-[100]">
+              <div className="flex justify-between items-center border-b border-gray-200 dark:border-zinc-800 pb-2">
+                <span className="text-xs font-semibold text-gray-900 dark:text-white uppercase tracking-wider">
                   Announcements
                 </span>
                 {notifications.length > 0 && (
@@ -89,15 +90,15 @@ export const Header: React.FC<HeaderProps> = ({
                       onDismissAllNotifications();
                       setDropdownOpen(false);
                     }}
-                    className="text-[10px] text-zinc-500 hover:text-white transition-colors focus:outline-none"
+                    className="text-[10px] text-gray-400 dark:text-zinc-500 hover:text-gray-900 dark:text-white transition-colors focus:outline-none"
                   >
                     Clear All
                   </button>
                 )}
               </div>
               <div className="max-h-60 overflow-y-auto space-y-2 text-xs">
                 {notifications.length === 0 ? (
-                  <div className="text-zinc-500 text-center py-4">
+                  <div className="text-gray-400 dark:text-zinc-500 text-center py-4">
                     No new notifications
                   </div>
                 ) : (
@@ -111,27 +112,27 @@ export const Header: React.FC<HeaderProps> = ({
                         className={`border p-3 rounded flex justify-between items-start gap-4 transition-colors relative group ${
                           isFail
                             ? "bg-red-500/10 border-red-500/20 text-red-200"
-                            : "bg-zinc-900 border-zinc-800 text-zinc-300"
+                            : "bg-white dark:bg-zinc-900 border-gray-200 dark:border-zinc-800 text-gray-600 dark:text-zinc-300"
                         }`}
                       >
                         <div className="flex items-start gap-2.5">
                           {isFail ? (
                             <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5" />
                           ) : (
-                            <Info className="w-4 h-4 text-zinc-400 mt-0.5" />
+                            <Info className="w-4 h-4 text-gray-500 dark:text-zinc-400 mt-0.5" />
                           )}
                           <div>
-                            <p className="font-semibold text-xs text-white">
+                            <p className="font-semibold text-xs text-gray-900 dark:text-white">
                               {ann.title}
                             </p>
-                            <p className="text-[10px] text-zinc-400 mt-1">
+                            <p className="text-[10px] text-gray-500 dark:text-zinc-400 mt-1">
                               {ann.description}
                             </p>
                           </div>
                         </div>
                         <button
                           onClick={() => onDismissNotification(ann.id)}
-                          className="text-zinc-500 hover:text-white transition-colors focus:outline-none"
+                          className="text-gray-400 dark:text-zinc-500 hover:text-gray-900 dark:text-white transition-colors focus:outline-none"
                         >
                           <X className="w-3.5 h-3.5" />
                         </button>
@@ -144,25 +145,28 @@ export const Header: React.FC<HeaderProps> = ({
           )}
         </div>
 
+        {/* Theme Toggle */}
+        <ThemeToggle />
+
         {/* User menu */}
         <div className="relative flex items-center gap-3" ref={profileDropdownRef}>
-          <span className="text-xs text-zinc-400 font-medium">{userEmail}</span>
+          <span className="text-xs text-gray-500 dark:text-zinc-400 font-medium">{userEmail}</span>
           <button
             data-testid="user-avatar"
             onClick={() => setProfileDropdownOpen(!profileDropdownOpen)}
-            className="w-8 h-8 rounded-full bg-zinc-800 border border-zinc-700 flex items-center justify-center text-white font-semibold uppercase text-xs hover:border-zinc-500 transition-colors focus:outline-none"
+            className="w-8 h-8 rounded-full bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 flex items-center justify-center text-gray-900 dark:text-white font-semibold uppercase text-xs hover:border-gray-400 dark:hover:border-zinc-500 transition-colors focus:outline-none"
           >
             {getInitials(userEmail)}
           </button>
 
           {profileDropdownOpen && (
-            <div className="absolute right-0 top-12 mt-2 w-48 bg-zinc-900 border border-zinc-800 rounded-lg shadow-2xl p-2 space-y-1 z-[100]">
+            <div className="absolute right-0 top-12 mt-2 w-48 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-2xl p-2 space-y-1 z-[100]">
               <button
                 onClick={() => {
                   setProfileDropdownOpen(false);
                   onGoToSettings();
                 }}
-                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 rounded transition-colors focus:outline-none"
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-600 dark:text-zinc-300 hover:text-gray-900 dark:text-white hover:bg-gray-100 dark:bg-zinc-800 rounded transition-colors focus:outline-none"
               >
                 <Settings className="w-4 h-4" />
                 Settings

qpi-ui/internal/dashboard/src/components/LoginModal.tsx

@@ -85,23 +85,23 @@ export const LoginModal: React.FC<LoginModalProps> = ({
   return (
     <div
       data-testid="login-modal"
-      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-md"
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-gray-50 dark:bg-zinc-950/80 backdrop-blur-md"
     >
-      <div className="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-lg shadow-2xl p-8 space-y-6">
+      <div className="w-full max-w-md bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-2xl p-8 space-y-6">
         <div className="text-center">
-          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-zinc-800 text-white mb-4 border border-zinc-700">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-white mb-4 border border-gray-300 dark:border-zinc-700">
             <Lock className="w-6 h-6" />
           </div>
-          <h2 className="text-2xl font-geist font-bold text-white">
+          <h2 className="text-2xl font-geist font-bold text-gray-900 dark:text-white">
             Sign in to QPI
           </h2>
-          <p className="text-sm text-zinc-400 mt-1">
+          <p className="text-sm text-gray-500 dark:text-zinc-400 mt-1">
             Access your quantum computing environment
           </p>
         </div>
 
         {/* Role tabs */}
-        <div className="flex border-b border-zinc-800">
+        <div className="flex border-b border-gray-200 dark:border-zinc-800">
           <button
             type="button"
             onClick={() => {
@@ -110,8 +110,8 @@ export const LoginModal: React.FC<LoginModalProps> = ({
             }}
             className={`flex-1 pb-2 font-geist text-sm text-center border-b-2 font-medium focus:outline-none transition-all ${
               role === "user"
-                ? "border-white text-white"
-                : "border-transparent text-zinc-400 hover:text-zinc-200"
+                ? "border-white text-gray-900 dark:text-white"
+                : "border-transparent text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:text-zinc-200"
             }`}
           >
             Regular User
@@ -124,8 +124,8 @@ export const LoginModal: React.FC<LoginModalProps> = ({
             }}
             className={`flex-1 pb-2 font-geist text-sm text-center border-b-2 font-medium focus:outline-none transition-all ${
               role === "admin"
-                ? "border-white text-white"
-                : "border-transparent text-zinc-400 hover:text-zinc-200"
+                ? "border-white text-gray-900 dark:text-white"
+                : "border-transparent text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:text-zinc-200"
             }`}
           >
             Administrator
@@ -143,7 +143,7 @@ export const LoginModal: React.FC<LoginModalProps> = ({
                     type="button"
                     disabled={loading}
                     onClick={() => handleOAuth2Login(provider.name)}
-                    className="w-full bg-zinc-800 hover:bg-zinc-700 text-white font-medium py-2 px-4 rounded transition-colors flex items-center justify-center gap-2 border border-zinc-700 disabled:opacity-50"
+                    className="w-full bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-900 dark:text-white font-medium py-2 px-4 rounded transition-colors flex items-center justify-center gap-2 border border-gray-300 dark:border-zinc-700 disabled:opacity-50"
                   >
                     <span className="capitalize">
                       Continue with {provider.name}
@@ -155,10 +155,10 @@ export const LoginModal: React.FC<LoginModalProps> = ({
               {(!authMethods || authMethods.password?.enabled !== false) && (
                 <div className="relative pt-4 pb-2">
                   <div className="absolute inset-0 flex items-center pt-2">
-                    <span className="w-full border-t border-zinc-800" />
+                    <span className="w-full border-t border-gray-200 dark:border-zinc-800" />
                   </div>
                   <div className="relative flex justify-center text-xs uppercase">
-                    <span className="bg-zinc-900 px-2 text-zinc-500 font-medium tracking-wider">
+                    <span className="bg-white dark:bg-zinc-900 px-2 text-gray-400 dark:text-zinc-500 font-medium tracking-wider">
                       Or use credentials
                     </span>
                   </div>
@@ -170,30 +170,30 @@ export const LoginModal: React.FC<LoginModalProps> = ({
         {(!authMethods || role === "admin" || authMethods.password?.enabled !== false) && (
           <form onSubmit={handleLogin} className="space-y-4">
             <div>
-              <label className="block text-xs font-medium text-zinc-400 mb-1.5 uppercase tracking-wider">
+              <label className="block text-xs font-medium text-gray-500 dark:text-zinc-400 mb-1.5 uppercase tracking-wider">
                 Email or Username
               </label>
               <input
                 type="text"
                 required
                 value={identity}
                 onChange={(e) => setIdentity(e.target.value)}
-                className="w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-zinc-500 transition-colors"
+                className="w-full bg-gray-50 dark:bg-zinc-950 border border-gray-200 dark:border-zinc-800 rounded px-3 py-2 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-zinc-500 transition-colors"
                 placeholder={
                   role === "admin" ? "admin@example.com" : "user@example.com"
                 }
               />
             </div>
             <div>
-              <label className="block text-xs font-medium text-zinc-400 mb-1.5 uppercase tracking-wider">
+              <label className="block text-xs font-medium text-gray-500 dark:text-zinc-400 mb-1.5 uppercase tracking-wider">
                 Password
               </label>
               <input
                 type="password"
                 required
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-zinc-500 transition-colors"
+                className="w-full bg-gray-50 dark:bg-zinc-950 border border-gray-200 dark:border-zinc-800 rounded px-3 py-2 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-zinc-500 transition-colors"
                 placeholder="••••••••"
               />
             </div>