Tweak language on API key list

app/scenes/Settings/ApiKeys.tsx

@@ -43,7 +43,7 @@ function ApiKeys() {
 
   return (
     <Scene
-      title={t("API Keys")}
+      title={t("API")}
       icon={<CodeIcon />}
       actions={
         <>
@@ -60,7 +60,7 @@ function ApiKeys() {
         </>
       }
     >
-      <Heading>{t("API Keys")}</Heading>
+      <Heading>{t("API")}</Heading>
       <Text as="p" type="secondary">
         <Trans
           defaults="Create personal API keys to authenticate with the API and programatically control
@@ -80,7 +80,7 @@ function ApiKeys() {
       <PaginatedList
         fetch={apiKeys.fetchPage}
         items={apiKeys.orderedData}
-        heading={<h2>{t("Generated Keys")}</h2>}
+        heading={<h2>{t("Personal keys")}</h2>}
         renderItem={(apiKey: ApiKey) => (
           <ApiKeyListItem
             key={apiKey.id}

app/scenes/Settings/components/ApiKeyListItem.tsx

@@ -8,6 +8,7 @@ import CopyToClipboard from "~/components/CopyToClipboard";
 import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
 import Text from "~/components/Text";
+import Time from "~/components/Time";
 import useUserLocale from "~/hooks/useUserLocale";
 import ApiKeyMenu from "~/menus/ApiKeyMenu";
 import { dateToExpiry } from "~/utils/date";
@@ -28,6 +29,7 @@ const ApiKeyListItem = ({ apiKey, isCopied, onCopy }: Props) => {
 
   const subtitle = (
     <Text type={hasExpired ? "danger" : "tertiary"}>
+      {t(`Created`)} <Time dateTime={apiKey.createdAt} addSuffix /> &middot;{" "}
       {apiKey.expiresAt
         ? dateToExpiry(apiKey.expiresAt, t, userLocale)
         : t("No expiry")}