client->server stuff, nav on mobile improvements

src/components/RecentCommits.tsx

@@ -1,6 +1,7 @@
 import { Component, For, Show } from "solid-js";
 import { Typewriter } from "./Typewriter";
 import { SkeletonText, SkeletonBox } from "./SkeletonLoader";
+import { formatRelativeDate } from "~/lib/date-utils";
 
 interface Commit {
   sha: string;
@@ -16,28 +17,6 @@ export const RecentCommits: Component<{
   title: string;
   loading?: boolean;
 }> = (props) => {
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 60) {
-      return `${diffMins}m ago`;
-    } else if (diffHours < 24) {
-      return `${diffHours}h ago`;
-    } else if (diffDays < 7) {
-      return `${diffDays}d ago`;
-    } else {
-      return date.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric"
-      });
-    }
-  };
-
   return (
     <div class="flex flex-col gap-3">
       <h3 class="text-subtext0 text-sm font-semibold">{props.title}</h3>
@@ -90,7 +69,7 @@ export const RecentCommits: Component<{
                     </span>
                   </div>
                   <span class="text-subtext1 shrink-0 text-[10px]">
-                    {formatDate(commit.date)}
+                    {formatRelativeDate(commit.date)}
                   </span>
                   <div class="flex min-w-0 items-center gap-2 overflow-hidden">
                     <span class="bg-surface1 shrink-0 rounded px-1.5 py-0.5 font-mono text-[10px]">