Use a modal manager

frontend/src/components/SiteHeader.tsx

@@ -1,18 +1,15 @@
 import { IconLock, IconLogout, IconUser } from "@tabler/icons-react";
-import { useState } from "react";
 import { LocalePicker, ThemeSwitcher } from "src/components";
 import { useAuthState } from "src/context";
 import { useUser } from "src/hooks";
 import { T } from "src/locale";
-import { ChangePasswordModal, UserModal } from "src/modals";
+import { showChangePasswordModal, showUserModal } from "src/modals";
 import styles from "./SiteHeader.module.css";
 
 export function SiteHeader() {
 	const { data: currentUser } = useUser("me");
 	const isAdmin = currentUser?.roles.includes("admin");
 	const { logout } = useAuthState();
-	const [showProfileEdit, setShowProfileEdit] = useState(false);
-	const [showChangePassword, setShowChangePassword] = useState(false);
 
 	return (
 		<header className="navbar navbar-expand-md d-print-none">
@@ -76,7 +73,7 @@ export function SiteHeader() {
 									className="dropdown-item"
 									onClick={(e) => {
 										e.preventDefault();
-										setShowProfileEdit(true);
+										showUserModal("me");
 									}}
 								>
 									<IconUser width={18} />
@@ -87,7 +84,7 @@ export function SiteHeader() {
 									className="dropdown-item"
 									onClick={(e) => {
 										e.preventDefault();
-										setShowChangePassword(true);
+										showChangePasswordModal("me");
 									}}
 								>
 									<IconLock width={18} />
@@ -110,10 +107,6 @@ export function SiteHeader() {
 					</div>
 				</div>
 			</div>
-			{showProfileEdit ? <UserModal userId="me" onClose={() => setShowProfileEdit(false)} /> : null}
-			{showChangePassword ? (
-				<ChangePasswordModal userId="me" onClose={() => setShowChangePassword(false)} />
-			) : null}
 		</header>
 	);
 }

frontend/src/components/Table/Formatter/EventFormatter.tsx

@@ -1,9 +1,10 @@
-import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc, IconUser } from "@tabler/icons-react";
+import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc, IconLock, IconUser } from "@tabler/icons-react";
 import type { AuditLog } from "src/api/backend";
 import { DateTimeFormat, T } from "src/locale";
 
 const getEventValue = (event: AuditLog) => {
 	switch (event.objectType) {
+		case "access-list":
 		case "user":
 			return event.meta?.name;
 		case "proxy-host":
@@ -47,6 +48,9 @@ const getIcon = (row: AuditLog) => {
 		case "stream":
 			ico = <IconDisc size={16} className={c} />;
 			break;
+		case "access-list":
+			ico = <IconLock size={16} className={c} />;
+			break;
 	}
 
 	return ico;