undone

src/components/ActivityHeatmap.tsx

@@ -74,15 +74,15 @@ export const ActivityHeatmap: Component<{
                 {() => (
                   <div class="flex flex-col gap-[2px]">
                     <For each={Array(7)}>
-                      {() => <SkeletonBox class="h-2 w-2 rounded-[2px]" />}
+                      {() => <div class="bg-surface0 h-2 w-2 rounded-[2px]" />}
                     </For>
                   </div>
                 )}
               </For>
             </div>
             {/* Centered spinner overlay */}
-            <div class="bg-base/70 absolute inset-0 flex items-center justify-center backdrop-blur-sm">
-              <SkeletonBox class="h-8 w-8" />
+            <div class="absolute inset-0 top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2">
+              <SkeletonBox class="-ml-2 h-8 w-8" />
             </div>
           </div>
         }

src/components/Bars.tsx

@@ -9,7 +9,6 @@ import {
   onCleanup
 } from "solid-js";
 import { api } from "~/lib/api";
-import { TerminalSplash } from "./TerminalSplash";
 import { insertSoftHyphens } from "~/lib/client-utils";
 import GitHub from "./icons/GitHub";
 import LinkedIn from "./icons/LinkedIn";
@@ -397,13 +396,15 @@ export function LeftBar() {
                 fallback={
                   <For each={[1, 2, 3]}>
                     {() => (
-                      <div class="flex flex-col gap-2">
-                        <div class="relative overflow-hidden">
-                          <SkeletonBox class="float-right mb-1 ml-2 h-12 w-16" />
-                          <SkeletonText class="mb-1 w-full" />
-                          <SkeletonText class="w-3/4" />
+                      <div class="flex flex-col">
+                        <div class="flex items-start gap-2">
+                          <div class="flex flex-1 flex-col gap-2">
+                            <SkeletonText class="h-6 w-full" />
+                            <SkeletonText class="h-6 w-full" />
+                          </div>
+                          <SkeletonBox class="h-14 w-16 shrink-0" />
                         </div>
-                        <SkeletonText class="clear-both w-24 text-xs" />
+                        <SkeletonText class="mt-2 h-6 w-full" />
                       </div>
                     )}
                   </For>

src/components/RecentCommits.tsx

@@ -1,7 +1,6 @@
 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;
@@ -17,6 +16,28 @@ 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>
@@ -69,7 +90,7 @@ export const RecentCommits: Component<{
                     </span>
                   </div>
                   <span class="text-subtext1 shrink-0 text-[10px]">
-                    {formatRelativeDate(commit.date)}
+                    {formatDate(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]">