Merge commit '31b0527e9a' into dev

surfsense_web/components/contact/contact-form.tsx

@@ -161,7 +161,7 @@ export const FeatureIconContainer = ({
 	);
 };
 
-export const Grid = ({ pattern, size }: { pattern?: number[][]; size?: number }) => {
+export const Grid = ({ pattern, size }: { pattern?: [number, number][]; size?: number }) => {
 	const p = pattern ?? [
 		[9, 3],
 		[8, 5],
@@ -185,7 +185,7 @@ export const Grid = ({ pattern, size }: { pattern?: number[][]; size?: number })
 	);
 };
 
-export function GridPattern({ width, height, x, y, squares, ...props }: any) {
+export function GridPattern({ width, height, x, y, squares, ...props }: React.ComponentProps<"svg"> & { width: number; height: number; x: string | number; y: string | number; squares?: [number, number][] }) {
 	const patternId = useId();
 
 	return (
@@ -205,7 +205,7 @@ export function GridPattern({ width, height, x, y, squares, ...props }: any) {
 			<rect width="100%" height="100%" strokeWidth={0} fill={`url(#${patternId})`} />
 			{squares && (
 				<svg aria-hidden="true" x={x} y={y} className="overflow-visible">
-					{squares.map(([x, y]: any, idx: number) => (
+					{squares.map(([x, y]: [number, number], idx: number) => (
 						<rect
 							strokeWidth="0"
 							key={`${x}-${y}-${idx}`}

surfsense_web/components/settings/roles-manager.tsx

@@ -510,12 +510,10 @@ function RolesContent({
 			<div className="space-y-3">
 				{roles.map((role) => (
 					<div key={role.id}>
-						<RolePermissionsDialog permissions={role.permissions} roleName={role.name}>
+						<div className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30">
-							<button
-								type="button"
-								className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30 cursor-pointer"
-							>
 							<div className="flex-1 min-w-0">
+								<RolePermissionsDialog permissions={role.permissions} roleName={role.name}>
+									<button type="button" className="w-full text-left cursor-pointer">
 										<div className="flex items-center gap-2">
 											<span className="font-medium text-sm">{role.name}</span>
 											{role.is_system_role && (
@@ -535,18 +533,15 @@ function RolesContent({
 											</p>
 										)}
 									</div>
+								</RolePermissionsDialog>
+							</div>
 
 							<div className="shrink-0">
 								<PermissionsBadge permissions={role.permissions} />
 							</div>
 
 							{!role.is_system_role && (
-									<div
+								<div className="shrink-0" role="none">
-										className="shrink-0"
-										role="none"
-										onClick={(e) => e.stopPropagation()}
-										onKeyDown={(e) => e.stopPropagation()}
-									>
 									<DropdownMenu>
 										<DropdownMenuTrigger asChild>
 											<Button variant="ghost" size="icon" className="h-8 w-8">
@@ -595,8 +590,7 @@ function RolesContent({
 									</DropdownMenu>
 								</div>
 							)}
-							</button>
+						</div>
-						</RolePermissionsDialog>
 					</div>
 				))}
 			</div>

surfsense_web/components/tool-ui/audio.tsx

@@ -30,6 +30,7 @@ function formatTime(seconds: number): string {
 
 export function Audio({ id, src, title, durationMs, className }: AudioProps) {
 	const audioRef = useRef<HTMLAudioElement>(null);
+	const downloadControllerRef = useRef<AbortController | null>(null);
 	const [isPlaying, setIsPlaying] = useState(false);
 	const [currentTime, setCurrentTime] = useState(0);
 	const [duration, setDuration] = useState(durationMs ? durationMs / 1000 : 0);
@@ -87,8 +88,12 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
 
 	// Handle download
 	const handleDownload = useCallback(async () => {
+		downloadControllerRef.current?.abort();
+		const controller = new AbortController();
+		downloadControllerRef.current = controller;
+
 		try {
-			const response = await fetch(src);
+			const response = await fetch(src, { signal: controller.signal });
 			const blob = await response.blob();
 			const url = window.URL.createObjectURL(blob);
 			const a = document.createElement("a");
@@ -99,10 +104,16 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
 			document.body.removeChild(a);
 			window.URL.revokeObjectURL(url);
 		} catch (err) {
+			if (err instanceof DOMException && err.name === "AbortError") return;
 			console.error("Error downloading audio:", err);
 		}
 	}, [src, title]);
 
+	// Abort in-flight download on unmount
+	useEffect(() => {
+		return () => downloadControllerRef.current?.abort();
+	}, []);
+
 	// Set up audio event listeners
 	useEffect(() => {
 		const audio = audioRef.current;