Design system overhaul: unified tokens, component authority, standardized layout

convex/users.ts

@@ -467,6 +467,31 @@ export const getByHandle = query({
   },
 });
 
+/** Lightweight stats for user hover tooltips. Uses the skills by_owner index. */
+export const getHoverStats = query({
+  args: { userId: v.id("users") },
+  handler: async (ctx, args) => {
+    const skills = await ctx.db
+      .query("skills")
+      .withIndex("by_owner", (q) => q.eq("ownerUserId", args.userId))
+      .take(500);
+
+    const active = skills.filter((s) => !s.softDeletedAt);
+    let totalStars = 0;
+    let totalDownloads = 0;
+    for (const s of active) {
+      totalStars += s.stats?.stars ?? 0;
+      totalDownloads += s.stats?.downloads ?? 0;
+    }
+
+    return {
+      publishedSkills: active.length,
+      totalStars,
+      totalDownloads,
+    };
+  },
+});
+
 export const getReservedHandleInternal = internalQuery({
   args: { handle: v.string() },
   handler: async (ctx, args) => {

src/components/AppProviders.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef } from "react";
 import { convex } from "../convex/client";
 import { getUserFacingAuthError, normalizeAuthErrorMessage } from "../lib/authErrorMessage";
 import { clearAuthError, setAuthError } from "../lib/useAuthError";
+import { TooltipProvider } from "./ui/tooltip";
 import { UserBootstrap } from "./UserBootstrap";
 
 function getPendingAuthCode() {
@@ -82,10 +83,12 @@ export function AuthErrorHandler() {
 export function AppProviders({ children }: { children: React.ReactNode }) {
   return (
     <ConvexAuthProvider client={convex} shouldHandleCode={false}>
-      <AuthCodeHandler />
-      <AuthErrorHandler />
-      <UserBootstrap />
-      {children}
+      <TooltipProvider delayDuration={400}>
+        <AuthCodeHandler />
+        <AuthErrorHandler />
+        <UserBootstrap />
+        {children}
+      </TooltipProvider>
     </ConvexAuthProvider>
   );
 }

src/components/DeploymentDriftBanner.tsx

@@ -69,17 +69,7 @@ function DeploymentDriftBannerContent() {
   return (
     <div
       role="alert"
-      style={{
-        margin: "16px auto 0",
-        width: "min(1100px, calc(100vw - 32px))",
-        border: "1px solid #f59e0b",
-        background: "#fff7ed",
-        color: "#9a3412",
-        borderRadius: "14px",
-        padding: "12px 16px",
-        fontSize: "0.95rem",
-        lineHeight: 1.4,
-      }}
+      className="mx-auto mt-4 w-[min(1100px,calc(100vw-32px))] rounded-[14px] border border-status-warning-fg/40 bg-status-warning-bg px-4 py-3 text-[0.95rem] leading-[1.4] text-status-warning-fg"
     >
       Deploy mismatch detected. Frontend expects backend build <code>{drift.expectedBuildSha}</code>{" "}
       but Convex reports <code>{drift.actualBuildSha}</code>.

src/components/Footer.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@tanstack/react-router";
+import { FOOTER_NAV_SECTIONS } from "../lib/nav-items";
 import { getSiteName } from "../lib/site";
 
 export function Footer() {
@@ -8,90 +9,29 @@ export function Footer() {
       <div className="site-footer-inner">
         <div className="site-footer-divider" aria-hidden="true" />
         <div className="footer-grid">
-          <div className="footer-col">
-            <h4 className="footer-col-title">Browse</h4>
-            <Link
-              to="/skills"
-              search={{
-                q: undefined,
-                sort: undefined,
-                dir: undefined,
-                highlighted: undefined,
-                nonSuspicious: undefined,
-                view: undefined,
-                focus: undefined,
-              }}
-            >
-              Skills
-            </Link>
-            <Link to="/plugins">Plugins</Link>
-            <Link
-              to="/souls"
-              search={{ q: undefined, sort: undefined, dir: undefined, view: undefined, focus: undefined }}
-            >
-              Souls
-            </Link>
-            <Link to="/users">Users</Link>
-            <Link
-              to="/skills"
-              search={{
-                q: undefined,
-                sort: undefined,
-                dir: undefined,
-                highlighted: true,
-                nonSuspicious: undefined,
-                view: undefined,
-                focus: undefined,
-              }}
-            >
-              Staff Picks
-            </Link>
-            <Link to="/search" search={{ q: undefined, type: undefined }}>
-              Search
-            </Link>
-          </div>
-          <div className="footer-col">
-            <h4 className="footer-col-title">Publish</h4>
-            <Link to="/publish-skill" search={{ updateSlug: undefined }}>
-              Publish Skill
-            </Link>
-            <Link
-              to="/publish-plugin"
-              search={{
-                ownerHandle: undefined,
-                name: undefined,
-                displayName: undefined,
-                family: undefined,
-                nextVersion: undefined,
-                sourceRepo: undefined,
-              }}
-            >
-              Publish Plugin
-            </Link>
-            <a href="https://github.com/openclaw/clawhub" target="_blank" rel="noreferrer">
-              Documentation
-            </a>
-          </div>
-          <div className="footer-col">
-            <h4 className="footer-col-title">Community</h4>
-            <a href="https://github.com/openclaw/clawhub" target="_blank" rel="noreferrer">
-              GitHub
-            </a>
-            <Link to="/about">About</Link>
-            <a href="https://openclaw.ai" target="_blank" rel="noreferrer">
-              OpenClaw
-            </a>
-          </div>
-          <div className="footer-col">
-            <h4 className="footer-col-title">Platform</h4>
-            <span>MIT Licensed</span>
-            <a href="https://vercel.com" target="_blank" rel="noreferrer">
-              Deployed on Vercel
-            </a>
-            <a href="https://www.convex.dev" target="_blank" rel="noreferrer">
-              Powered by Convex
-            </a>
-          </div>
+          {FOOTER_NAV_SECTIONS.map((section) => (
+            <div key={section.title} className="footer-col">
+              <h4 className="footer-col-title">{section.title}</h4>
+              {section.items.map((item) => {
+                if (item.kind === "link") {
+                  return (
+                    <Link key={item.label} to={item.to} search={item.search ?? {}}>
+                      {item.label}
+                    </Link>
+                  );
+                }
+                if (item.kind === "external") {
+                  return (
+                    <a key={item.label} href={item.href} target="_blank" rel="noreferrer">
+                      {item.label}
+                    </a>
+                  );
+                }
+                // kind === "text"
+                return <span key={item.label}>{item.label}</span>;
+              })}
+            </div>
+          ))}
         </div>
         <div className="footer-bottom">
           <span>