refactor(webui): clarify shared controls and status feedback

webui/src/layout/Titlebar.tsx

@@ -23,9 +23,10 @@ type Props = {
   onSettingsChange: (settings: ApiSettings) => void;
   onAuthChange: (auth: AuthUpdate | null, accessToken?: string) => void;
   maintenanceMode?: {enabled: boolean;message?: string | null;};
+  backendReachable?: boolean;
 };
 
-export default function Titlebar({ settings, auth, onAuthChange, maintenanceMode }: Props) {
+export default function Titlebar({ settings, auth, onAuthChange, maintenanceMode, backendReachable = true }: Props) {
   const navigate = useGuardedNavigate();
   const { requestNavigation } = useUnsavedChanges();
   const [accountOpen, setAccountOpen] = useState(false);
@@ -161,7 +162,15 @@ export default function Titlebar({ settings, auth, onAuthChange, maintenanceMode
 
   return (
     <header className="titlebar">
-      {maintenanceMode?.enabled &&
+      {!backendReachable ?
+      <div
+        className="backend-offline-topbar-alert"
+        role="status"
+        aria-live="polite"
+        title="System not reachable / offline!">
+          System not reachable / offline!
+        </div> :
+      maintenanceMode?.enabled &&
       <button
         type="button"
         className="maintenance-topbar-link"