improve homepage

Author: milomg

playground/pages/home.tsx

@@ -36,24 +36,45 @@ interface Repls {
   list: APIRepl[];
 }
 
+const formatter = new Intl.RelativeTimeFormat('en');
+const timeAgo = (ms: number): string => {
+  const sec = Math.round(ms / 1000);
+  const min = Math.round(sec / 60);
+  const hr = Math.round(min / 60);
+  const day = Math.round(hr / 24);
+  const month = Math.round(day / 30);
+  const year = Math.round(month / 12);
+  if (sec < 10) {
+    return 'just now';
+  } else if (sec < 45) {
+    return formatter.format(-sec, 'second');
+  } else if (sec < 90 || min < 45) {
+    return formatter.format(-min, 'minute');
+  } else if (min < 90 || hr < 24) {
+    return formatter.format(-hr, 'hour');
+  } else if (hr < 36 || day < 30) {
+    return formatter.format(-day, 'day');
+  } else if (month < 18) {
+    return formatter.format(-month, 'month');
+  } else {
+    return formatter.format(-year, 'year');
+  }
+};
+
 export const Home = () => {
   const params = useParams();
   const context = useAppContext()!;
   const navigate = useNavigate();
   const location = useLocation();
 
   createEffect(() => {
-    if (!location.hash && (context.token || localStorage.getItem('scratchpad'))) return;
+    if (!location.hash && context.token) return;
 
     const initialTabs = parseHash(location.hash.slice(1), defaultTabs);
 
     localStorage.setItem(
       'scratchpad',
       JSON.stringify({
-        title: 'Scratchpad',
-        public: true,
-        labels: [],
-        version: '1.0',
         files: initialTabs.map((x) => ({
           name: x.name + ((x as any).type ? `.${(x as any).type}` : ''),
           content: x.source.split('\n'),
@@ -92,37 +113,45 @@ export const Home = () => {
         }}
       />
       <div class="m-8">
-        <button
-          class="bg-solid-lightgray shadow-md dark:bg-solid-darkLighterBg rounded-xl p-4 text-3xl flex mx-auto"
-          onClick={async () => {
-            const result = await fetch(`${API}/repl`, {
-              method: 'POST',
-              headers: {
-                'authorization': `Bearer ${context.token}`,
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                title: 'Counter Example',
-                public: true,
-                labels: [],
-                version: '1.0',
-                files: defaultTabs.map((x) => ({ name: x.name, content: x.source.split('\n') })),
-              }),
-            });
-            const { id } = await result.json();
-            navigate(`/${context.user()?.display}/${id}`);
-          }}
-        >
-          <Icon path={plus} class="w-8" /> Create new REPL
-        </button>
+        <div class="flex flex-col align-middle">
+          <button
+            class="bg-solid-lightgray shadow-md dark:bg-solid-darkLighterBg rounded-xl p-4 text-3xl flex mx-auto"
+            onClick={async () => {
+              const result = await fetch(`${API}/repl`, {
+                method: 'POST',
+                headers: {
+                  'authorization': `Bearer ${context.token}`,
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  title: 'Counter Example',
+                  public: true,
+                  labels: [],
+                  version: '1.0',
+                  files: defaultTabs.map((x) => ({ name: x.name, content: x.source.split('\n') })),
+                }),
+              });
+              const { id } = await result.json();
+              navigate(`/${context.user()?.display}/${id}`);
+            }}
+          >
+            <Icon path={plus} class="w-8" /> Create new REPL
+          </button>
+          <p class="text-center text-gray-300 text-sm">
+            Or{' '}
+            <a href="/scratchpad" class="hover:underline">
+              open my scratchpad
+            </a>
+          </p>
+        </div>
 
         <h1 class="text-center text-3xl mb-4 mt-16">{params.user || 'My'} Repls</h1>
-        <table class="w-128 mx-auto">
+        <table class="w-200 max-w-full mx-auto">
           <thead>
             <tr class="border-b border-neutral-600">
-              <td>Title</td>
-              <td>Edited</td>
-              <td>Options</td>
+              <td class="w-6/10">Title</td>
+              <td class="w-32">Edited</td>
+              <td class="text-right w-20">Options</td>
             </tr>
           </thead>
           <tbody>
@@ -153,8 +182,8 @@ export const Home = () => {
                     <td>
                       <a href={`${params.user || context.user()?.display}/${repl.id}`}>{repl.title}</a>
                     </td>
-                    <td>{new Date(repl.created_at).toLocaleString()}</td>
-                    <td>
+                    <td>{timeAgo(Date.now() - new Date(repl.updated_at || repl.created_at).getTime())}</td>
+                    <td class="text-right">
                       <Icon
                         path={repl.public ? eye : eyeOff}
                         class="w-6 inline m-2 ml-0 cursor-pointer"