Display people created in title

crabfit-backend/routes/getPeople.js

@@ -7,6 +7,7 @@ module.exports = async (req, res) => {
 		people = people.map(person => ({
 			name: person.name,
 			availability: person.availability,
+			created: person.created,
 		}));
 
 		res.send({

crabfit-backend/routes/login.js

@@ -21,6 +21,7 @@ module.exports = async (req, res) => {
 			res.send({
 				name: personName,
 				availability: personResult.availability,
+				created: personResult.created,
 			});
 		} else {
 			res.sendStatus(404);

crabfit-backend/swagger.yaml

@@ -36,6 +36,8 @@ definitions:
         type: "array"
         items:
           type: "string"
+      created:
+        type: "integer"
 paths:
   "/stats":
     get:

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, Fragment } from 'react';
 import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { useSettingsStore } from 'stores';
 
@@ -31,6 +32,7 @@ import {
 
 dayjs.extend(localeData);
 dayjs.extend(customParseFormat);
+dayjs.extend(relativeTime);
 
 const AvailabilityViewer = ({
 	times,
@@ -89,6 +91,7 @@ const AvailabilityViewer = ({
                   }}
                   onMouseOver={() => setTempFocus(person.name)}
                   onMouseOut={() => setTempFocus(null)}
+                  title={person.created && dayjs.unix(person.created).fromNow()}
                 >{person.name}</Person>
               )}
             </People>