From b510f3c539fb6c71ffba6f32974193d6fb035165 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Mon, 14 Apr 2025 15:12:21 +0200
Subject: [bugfix/frontend] Fix photoswipe layout issues, keyboard shortcuts
 (#4010)

* fix photoswipe layout issues (chrome)

* aaaaaaaaaaaaaa

* wwwwwwwwwwww
---
 .../settings/views/admin/http-header-permissions/overview.tsx  | 10 ++++++++--
 .../views/moderation/domain-permissions/drafts/index.tsx       | 10 ++++++++--
 .../views/moderation/domain-permissions/excludes/index.tsx     | 10 ++++++++--
 .../settings/views/moderation/domain-permissions/form.tsx      | 10 ++++++++--
 .../moderation/domain-permissions/subscriptions/common.tsx     | 10 ++++++++--
 web/source/settings/views/moderation/reports/search.tsx        | 10 ++++++++--
 web/source/settings/views/user/applications/search.tsx         | 10 ++++++++--
 web/source/settings/views/user/interactions/search.tsx         | 10 ++++++++--
 8 files changed, 64 insertions(+), 16 deletions(-)

(limited to 'web/source/settings/views')

diff --git a/web/source/settings/views/admin/http-header-permissions/overview.tsx b/web/source/settings/views/admin/http-header-permissions/overview.tsx
index 0b708aa8c..3509e6617 100644
--- a/web/source/settings/views/admin/http-header-permissions/overview.tsx
+++ b/web/source/settings/views/admin/http-header-permissions/overview.tsx
@@ -65,7 +65,8 @@ export default function HeaderPermsOverview() {
 	} = useGetHeaderAllowsQuery(NoArg, { skip: permType !== "allow" });
 
 	const itemToEntry = (perm: HeaderPermission) => {
-		const onClick = () => {
+		const onClick = (e) => {
+			e.preventDefault();
 			// When clicking on a header perm,
 			// go to the detail view for perm.
 			setLocation(`/${permType}s/${perm.id}`, {
@@ -81,7 +82,12 @@ export default function HeaderPermsOverview() {
 				key={perm.id}
 				className="entry pseudolink"
 				onClick={onClick}
-				onKeyDown={e => e.key === "Enter" && onClick()}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						onClick(e);
+					}
+				}}
 				role="link"
 				tabIndex={0}
 			>
diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx
index 36bc7ee01..baa3e7a5b 100644
--- a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx
@@ -211,7 +211,8 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
 
 	const title = `${permTypeUpper} ${domain}`;
 
-	const onClick = () => {
+	const onClick = (e) => {
+		e.preventDefault();
 		// When clicking on a draft, direct
 		// to the detail view for that draft.
 		setLocation(linkTo, {
@@ -228,7 +229,12 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
 			aria-label={title}
 			title={title}
 			onClick={onClick}
-			onKeyDown={e => e.key === "Enter" && onClick()}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					onClick(e);
+				}
+			}}
 			role="link"
 			tabIndex={0}
 		>
diff --git a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx
index 207f94d61..adc78ec6d 100644
--- a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx
@@ -186,7 +186,8 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
 		return <ErrorC error={new Error("id was undefined")} />;
 	}
 
-	const onClick = () => {
+	const onClick = (e) => {
+		e.preventDefault();
 		// When clicking on a exclude, direct
 		// to the detail view for that exclude.
 		setLocation(linkTo, {
@@ -203,7 +204,12 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
 			aria-label={`Exclude ${domain}`}
 			title={`Exclude ${domain}`}
 			onClick={onClick}
-			onKeyDown={e => e.key === "Enter" && onClick()}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					onClick(e);
+				}
+			}}
 			role="link"
 			tabIndex={0}
 		>
diff --git a/web/source/settings/views/moderation/domain-permissions/form.tsx b/web/source/settings/views/moderation/domain-permissions/form.tsx
index cf1447cfd..caa2cbe83 100644
--- a/web/source/settings/views/moderation/domain-permissions/form.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/form.tsx
@@ -71,7 +71,8 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
 	}, [exportResult]);
 
 	const importFileRef = useRef<HTMLInputElement>(null);
-	const importFileOnClick = () => {
+	const importFileOnClick = (e) => {
+		e.preventDefault();
 		importFileRef.current?.click();
 	};
 
@@ -110,7 +111,12 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
 						className={`button with-icon${form.permType.value === undefined || form.permType.value.length === 0 ? " disabled" : ""}`}
 						tabIndex={0}
 						onClick={importFileOnClick}
-						onKeyDown={e => e.key === "Enter" && importFileOnClick()}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								importFileOnClick(e);
+							}
+						}}
 						role="button"
 					>
 						<i className="fa fa-fw " aria-hidden="true" />
diff --git a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx
index 808d03dcf..def7e2c6e 100644
--- a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx
+++ b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx
@@ -109,7 +109,8 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
 		successfullyFetchedAtStr = new Date(successfullyFetchedAt).toDateString();
 	}
 
-	const onClick = () => {
+	const onClick = (e) => {
+		e.preventDefault();
 		// When clicking on a subscription, direct
 		// to the detail view for that subscription.
 		setLocation(linkTo, {
@@ -126,7 +127,12 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
 			aria-label={ariaLabel}
 			title={ariaLabel}
 			onClick={onClick}
-			onKeyDown={e => e.key === "Enter" && onClick()}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					onClick(e);
+				}
+			}}
 			role="link"
 			tabIndex={0}
 		>
diff --git a/web/source/settings/views/moderation/reports/search.tsx b/web/source/settings/views/moderation/reports/search.tsx
index bae0a2004..9c671268b 100644
--- a/web/source/settings/views/moderation/reports/search.tsx
+++ b/web/source/settings/views/moderation/reports/search.tsx
@@ -184,7 +184,8 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
 	const created = new Date(report.created_at).toLocaleString();
 	const title = `${status}. @${target.account.acct} was reported by @${from.account.acct} on ${created}. Reason: "${comment}"`;
 
-	const onClick = () => {
+	const onClick = (e) => {
+		e.preventDefault();
 		// When clicking on a report, direct
 		// to the detail view for that report.
 		setLocation(linkTo, {
@@ -201,7 +202,12 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
 			aria-label={title}
 			title={title}
 			onClick={onClick}
-			onKeyDown={e => e.key === "Enter" && onClick()}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					onClick(e);
+				}
+			}}
 			role="link"
 			tabIndex={0}
 		>
diff --git a/web/source/settings/views/user/applications/search.tsx b/web/source/settings/views/user/applications/search.tsx
index afbb0d326..02f8ed5c6 100644
--- a/web/source/settings/views/user/applications/search.tsx
+++ b/web/source/settings/views/user/applications/search.tsx
@@ -139,7 +139,8 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
 	const created = useCreated(app);
 	const redirectURIs = useRedirectURIs(app);
 
-	const onClick = () => {
+	const onClick = (e) => {
+		e.preventDefault();
 		// When clicking on an app, direct
 		// to the detail view for that app.
 		setLocation(linkTo, {
@@ -156,7 +157,12 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
 			aria-label={`${app.name}`}
 			title={`${app.name}`}
 			onClick={onClick}
-			onKeyDown={e => e.key === "Enter" && onClick()}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					onClick(e);
+				}
+			}}
 			role="link"
 			tabIndex={0}
 		>
diff --git a/web/source/settings/views/user/interactions/search.tsx b/web/source/settings/views/user/interactions/search.tsx
index 5d2da7563..2f5f41d7d 100644
--- a/web/source/settings/views/user/interactions/search.tsx
+++ b/web/source/settings/views/user/interactions/search.tsx
@@ -174,7 +174,8 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) {
 	const ourContent = useContent(req.status);
 	const theirContent = useContent(req.reply);
 
-	const onClick = () => {
+	const onClick = (e) => {
+		e.preventDefault();
 		// When clicking on a request, direct
 		// to the detail view for that request.
 		setLocation(linkTo, {
@@ -191,7 +192,12 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) {
 			aria-label={label}
 			title={label}
 			onClick={onClick}
-			onKeyDown={e => e.key === "Enter" && onClick()}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					onClick(e);
+				}
+			}}
 			role="link"
 			tabIndex={0}
 		>
-- 
cgit v1.3