Initial curated Unraid-AppOps-Gateway source from 3bd6f6fee310125bfbb4d4650389a817f498724d

src/components/OperatorReadOnlyBanner.tsx

@@ -0,0 +1,22 @@
+import { LockKeyhole } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useOperatorSession } from "@/hooks/useOperatorSession";
+
+export const OperatorReadOnlyBanner = () => {
+  const unlocked = useOperatorSession();
+  if (unlocked) return null;
+
+  return (
+    <div className="border-b border-amber-500/25 bg-amber-950/80 px-4 py-2 text-amber-100" role="status" aria-live="polite">
+      <div className="mx-auto flex max-w-[1800px] flex-col gap-2 text-xs sm:flex-row sm:items-center sm:justify-between">
+        <span className="flex items-center gap-2">
+          <LockKeyhole className="h-3.5 w-3.5 shrink-0 text-amber-300" aria-hidden="true" />
+          Read-only modus: status en auditinformatie blijven zichtbaar; mutaties en operatorintegraties zijn vergrendeld.
+        </span>
+        <Link className="font-semibold text-amber-200 underline-offset-4 hover:underline" to="/settings?tab=security">
+          Operatorsessie ontgrendelen
+        </Link>
+      </div>
+    </div>
+  );
+};