add version publisher avatar, a11y tweaks (#2274)

Author: Simek

components/Package/TrustedBadge.tsx

@@ -1,17 +1,22 @@
-import { View } from 'react-native';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
 
 import { Verified } from '~/components/Icons';
 import Tooltip from '~/components/Tooltip';
 import tw from '~/util/tailwind';
 
-export default function TrustedBadge() {
+type Props = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export default function TrustedBadge({ style }: Props) {
   return (
     <Tooltip
       trigger={
-        <View role="button" aria-label="Trusted publisher">
-          <Verified width={16} height={16} style={tw`text-success`} />
+        <View role="button" aria-label="Trusted publisher" style={style}>
+          <Verified style={tw`h-[15px] w-4 text-success`} />
         </View>
-      }>
+      }
+      sideOffset={0}>
       Trusted publisher
     </Tooltip>
   );

components/Package/VersionBox.tsx

@@ -1,10 +1,12 @@
+import SHA256 from 'crypto-js/sha256';
 import { View } from 'react-native';
 
 import { A, Caption, Label, useLayout } from '~/common/styleguide';
 import { Dependency, Download, PackageSize } from '~/components/Icons';
 import TrustedBadge from '~/components/Package/TrustedBadge';
+import UserAvatar from '~/components/Package/UserAvatar';
+import RelativeTime from '~/components/RelativeTime';
 import { type NpmRegistryVersionData } from '~/types';
-import { getTimeSinceToday } from '~/util/datetime';
 import { formatBytes } from '~/util/formatBytes';
 import { formatNumberToString, pluralize } from '~/util/strings';
 import tw from '~/util/tailwind';
@@ -20,27 +22,34 @@ export default function VersionBox({ label, time, versionData, downloads = 0 }:
   const { isSmallScreen } = useLayout();
 
   const urlBase = `https://www.npmjs.com/package/${versionData.name}/v/${versionData.version}`;
+  const publisherMetadata = versionData._npmUser?.url ?? versionData._npmUser?.email;
 
   return (
     <View
       style={[
-        tw`flex-row items-center justify-between gap-0.5 rounded-xl border border-palette-gray2 px-4 py-2.5 dark:border-default`,
-        isSmallScreen && tw`flex-col items-start justify-start gap-2`,
+        tw`flex-row items-center justify-between gap-0.5 rounded-xl border border-palette-gray2 px-4 pb-2.5 pt-2 dark:border-default`,
+        isSmallScreen && tw`flex-col items-start justify-start gap-x-2 gap-y-2.5`,
       ]}>
       <View>
-        <View style={tw`min-h-4 flex-row items-center gap-1`}>
+        <View style={tw`min-h-4 flex-row flex-wrap items-center gap-1`}>
           {label && <Caption style={tw`tabular-nums`}>{label}</Caption>}
           {label && <Caption style={tw`text-secondary`}>{` • `}</Caption>}
           <Caption style={label && tw`tabular-nums text-secondary`}>{versionData.version}</Caption>
         </View>
-        <View style={tw`min-h-4 flex-row items-center gap-1`}>
-          <Label style={tw`font-light text-secondary`}>
-            Released {getTimeSinceToday(time)} by {versionData._npmUser?.name}
-          </Label>
-          {versionData._npmUser?.trustedPublisher && <TrustedBadge />}
-        </View>
+        <Label style={tw`flex min-h-4 flex-wrap items-center font-light text-secondary`}>
+          Released <RelativeTime time={time} dateOnly /> by
+          {versionData._npmUser?.trustedPublisher && <TrustedBadge style={tw`mx-[3px]`} />}
+          {publisherMetadata && !versionData._npmUser?.trustedPublisher && (
+            <UserAvatar
+              src={`https://gravatar.com/avatar/${SHA256(publisherMetadata).toString()}?d=retro`}
+              alt={`${versionData._npmUser?.name} avatar`}
+              style={tw`relative top-px mx-[3px] size-3.5 border border-default`}
+            />
+          )}
+          {versionData._npmUser?.name ?? 'Unknown'}
+        </Label>
       </View>
-      <View style={tw`flex-row flex-wrap gap-x-5 gap-y-1`}>
+      <View style={tw`flex-row flex-wrap gap-x-5 gap-y-1.5`}>
         {versionData.dependencies && (
           <View style={[tw`flex-row items-center gap-2.5`, !isSmallScreen && tw`min-w-[110px]`]}>
             <Dependency style={tw`text-icon`} />

components/RelativeTime.tsx

@@ -0,0 +1,24 @@
+import { Label } from '~/common/styleguide';
+import Tooltip from '~/components/Tooltip';
+import { getTimeSinceToday } from '~/util/datetime';
+import tw from '~/util/tailwind';
+
+type Props = {
+  time: string;
+  dateOnly?: boolean;
+};
+
+export default function RelativeTime({ time, dateOnly }: Props) {
+  return (
+    <Tooltip
+      trigger={<time dateTime={time}>{getTimeSinceToday(time)}</time>}
+      sideOffset={0}
+      delayDuration={500}>
+      <Label style={tw`font-light text-white`}>
+        {dateOnly
+          ? new Date(time).toLocaleDateString('en-US')
+          : new Date(time).toLocaleString('en-US')}
+      </Label>
+    </Tooltip>
+  );
+}