make it a bit prettier, link to docs (still need to write..)

web/source/settings/views/user/menu.tsx

@@ -64,7 +64,7 @@ export default function UserMenu() {
 				icon="fa-floppy-o"
 			/>
 			<MenuItem
-				name="App Tokens"
+				name="Access Tokens"
 				itemUrl="tokens"
 				icon="fa-certificate"
 			/>

web/source/settings/views/user/tokens/index.tsx

@@ -24,14 +24,22 @@ export default function Tokens() {
 	return (
 		<div className="tokens-view">
 			<div className="form-section-docs">
-				<h1>App Tokens</h1>
+				<h1>Access Tokens</h1>
 				<p>
 					On this page you can search through access tokens owned by applications that you have authorized to access your account and/or perform actions on your behalf.
 					<br/>You can invalidate a token by clicking on the invalidate button under a token. This will remove the token from the database.
 					<br/>The application that was authorized to access your account with that token will then no longer be authorized to do so, and you will need to log out and log in again with that application.
-					<br/>In cases where you've logged into an application multiple times, or logged in with multiple devices or browsers, you may see multiple tokens for one application. This is normal!
+					<br/>In cases where you've logged in with an application multiple times, or logged in with multiple devices or browsers, you may see multiple tokens with the same application name. This is normal!
 					<br/>That said, feel free to invalidate old tokens that are never used, it's good security practice and it's fun to click the big red button.
 				</p>
+				<a
+					href="https://docs.gotosocial.org/en/latest/user_guide/settings/#access-tokens"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about access tokens (opens in a new tab)
+				</a>
 			</div>
 			<TokensSearchForm />
 		</div>

web/source/settings/views/user/tokens/search.tsx

@@ -125,8 +125,42 @@ interface TokenInfoListEntryProps {
 }
 
 function TokenInfoListEntry({ tokenInfo }: TokenInfoListEntryProps) {
-	const created = new Date(tokenInfo.created_at).toLocaleString();
-	const lastUsed = tokenInfo.last_used ? new Date(tokenInfo.last_used).toDateString(): "unknown/never";
+	const appWebsite = useMemo(() => {
+		if (!tokenInfo.application.website) {
+			return "";
+		}
+
+		try {
+			// Try to parse nicely and return link.
+			const websiteURL = new URL(tokenInfo.application.website);
+			const websiteURLStr = websiteURL.toString();
+			return (
+				<a
+					href={websiteURLStr}
+					target="_blank"
+					rel="nofollow noreferrer noopener"
+				>{websiteURLStr}</a>
+			);
+		} catch {
+			// Fall back to returning string.
+			return tokenInfo.application.website;
+		}
+	}, [tokenInfo.application.website]);
+	
+	const created = useMemo(() => {
+		const createdAt = new Date(tokenInfo.created_at);
+		return <time dateTime={tokenInfo.created_at}>{createdAt.toDateString()}</time>;
+	}, [tokenInfo.created_at]);
+
+	const lastUsed = useMemo(() => {
+		if (!tokenInfo.last_used) {
+			return "unknown/never";
+		}
+
+		const lastUsed = new Date(tokenInfo.last_used);
+		return <time dateTime={tokenInfo.last_used}>{lastUsed.toDateString()}</time>;
+	}, [tokenInfo.last_used]);
+
 	const [ invalidate, invalidateResult ] = useInvalidateTokenMutation();
 
 	return (
@@ -140,22 +174,22 @@ function TokenInfoListEntry({ tokenInfo }: TokenInfoListEntryProps) {
 					<dt>App name:</dt>
 					<dd className="text-cutoff">{tokenInfo.application.name}</dd>
 				</div>
-				{ tokenInfo.application.website && 
+				{ appWebsite && 
 					<div className="info-list-entry">
 						<dt>App website:</dt>
-						<dd className="text-cutoff">{tokenInfo.application.website}</dd>
+						<dd className="text-cutoff">{appWebsite}</dd>
 					</div>
 				}
 				<div className="info-list-entry">
-					<dt>Token scope:</dt>
+					<dt>Scope:</dt>
 					<dd className="text-cutoff monospace">{tokenInfo.scope}</dd>
 				</div>
 				<div className="info-list-entry">
-					<dt>Token created at:</dt>
+					<dt>Created:</dt>
 					<dd className="text-cutoff">{created}</dd>
 				</div>
 				<div className="info-list-entry">
-					<dt>Token last used:</dt>
+					<dt>Last used:</dt>
 					<dd className="text-cutoff">{lastUsed}</dd>
 				</div>
 			</dl>