Rebuild Openlaunch UI and harden live market charts

app/package.json

@@ -13,10 +13,12 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1127.0",
+    "@base-ui/react": "^1.8.0",
     "@tanstack/react-query": "^5.91.3",
     "clsx": "^2.1.1",
     "lightweight-charts": "^5.2.1",
     "lucide-react": "^1.42.0",
+    "motion": "^13.2.0",
     "next": "^16.2.9",
     "next-themes": "^0.4.6",
     "postgres": "^3.4.9",

app/src/app/(home)/loading.tsx

@@ -1,40 +1,49 @@
-import { Sk, SkPost, SkRow, SkStat } from "@/components/Skeleton";
+import { Sk, SkPost, SkRow } from "@/components/Skeleton";
 
 /** Home skeleton: hero + totals, list header, rows, side column. Same grid as page.tsx so nothing shifts. */
 export default function Loading() {
   return (
     <main className="relative mx-auto max-w-6xl px-4 pb-16 space-y-8" aria-busy="true" aria-label="loading">
-      <section className="pt-8 sm:pt-12 grid lg:grid-cols-[minmax(0,1fr)_22rem] gap-8 items-start">
-        <div className="space-y-4">
-          <Sk className="h-12 sm:h-14 w-4/5" />
-          <Sk className="h-12 sm:h-14 w-3/5" />
-          <Sk className="h-5 w-2/3 mt-6" />
-          <Sk className="h-5 w-1/2" />
-          <div className="flex gap-3 pt-2">
-            <Sk className="h-12 w-44 rounded-xl" />
-            <Sk className="h-12 w-32 rounded-xl" />
+      <section className="pt-10 sm:pt-14 pb-2 grid lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] gap-x-8 gap-y-8 xl:gap-x-12 lg:gap-y-0 lg:grid-rows-[min-content_1fr]">
+        <div className="min-w-0 lg:col-start-1 lg:row-start-1">
+          <div className="space-y-2">
+            {[0, 1, 2].map((i) => <Sk key={i} className="h-11 sm:h-14 lg:h-12 xl:h-14 w-11/12" />)}
           </div>
+          <div className="mt-6 space-y-2">{[0, 1, 2].map((i) => <Sk key={i} className="h-5 w-11/12" />)}</div>
+          <div className="mt-8 flex flex-col sm:flex-row gap-3 sm:gap-5"><Sk className="h-12 w-full sm:w-48 rounded-xl" /><Sk className="h-5 w-28 self-center" /></div>
+          <Sk className="mt-6 h-4 w-64 max-w-full" />
+        </div>
+        <div className="min-w-0 lg:col-start-2 lg:row-start-1 lg:row-span-2 self-center">
+          <div className="mx-auto max-w-[560px]">
+            <div className="flex h-9 items-center"><Sk className="h-3 w-48" /></div>
+            <div className="aspect-[560/398] flex items-center justify-center"><Sk className="h-2/3 w-3/4 rounded-2xl" /></div>
+            <div className="grid grid-cols-3 gap-4 border-b border-line py-4">{[0, 1, 2].map((i) => <Sk key={i} className="h-3 w-20 max-w-full" />)}</div>
+            <div className="h-[105px] space-y-3 pt-4"><Sk className="h-4 w-56 max-w-full" /><Sk className="h-3 w-full" /><Sk className="h-3 w-4/5" /></div>
+            <Sk className="h-4 w-4/5" />
+          </div>
+        </div>
+        <div className="min-w-0 lg:col-start-1 lg:row-start-2 lg:mt-9 border-t border-line pt-4">
+          <Sk className="h-4 w-full" />
+          <div className="mt-5 grid grid-cols-3 gap-4">{[0, 1, 2].map((i) => <div key={i} className="space-y-3"><Sk className="h-3 w-24 max-w-full" /><Sk className="h-7 w-24 max-w-full" /></div>)}</div>
+          <Sk className="mt-5 h-3 w-44" />
         </div>
-        <dl className="grid grid-cols-2 gap-2.5">
-          <SkStat />
-          <SkStat />
-          <SkStat />
-          <SkStat />
-        </dl>
       </section>
-      <div className="grid lg:grid-cols-[minmax(0,1fr)_20rem] gap-6 items-start">
-        <section className="space-y-3">
-          <div className="flex items-center justify-between gap-3">
+      <div className="space-y-3"><Sk className="h-4 w-40" /><Sk className="h-16 w-full rounded-xl" /></div>
+      <div className="grid xl:grid-cols-[minmax(0,1fr)_17rem] gap-6 items-start">
+        <section className="overflow-hidden rounded-2xl border border-line bg-paper">
+          <div className="flex flex-wrap items-center justify-between gap-3 px-4 pt-5">
             <Sk className="h-7 w-32" />
-            <Sk className="h-11 w-72 max-w-full rounded-full" />
+            <Sk className="h-11 w-full sm:w-64 rounded-xl" />
           </div>
-          <div className="flex items-center gap-2">
-            <Sk className="h-8 w-56 rounded-full" />
-            <Sk className="h-8 w-80 max-w-full rounded-full ml-auto" />
+          <div className="space-y-4 px-4 py-4">
+            <Sk className="h-10 w-full max-w-md" />
+            <Sk className="h-11 w-64 max-w-full rounded-xl" />
+            <Sk className="h-10 w-64 max-w-full" />
+            <Sk className="h-3 w-36" />
           </div>
-          <ul className="rounded-2xl bg-card border border-line shadow-card overflow-hidden">
+          <ul>
             {Array.from({ length: 8 }, (_, i) => (
-              <SkRow key={i} i={i} />
+              <SkRow key={i} i={i} ledger />
             ))}
           </ul>
         </section>

app/src/app/(home)/page.tsx

@@ -26,28 +26,28 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
 
   return (
     <>
-      <div className="bb-sky" aria-hidden />
       <main className="relative mx-auto max-w-6xl px-4 pb-16 space-y-8">
         <LaunchHero configured={LAUNCHPAD_CONFIGURED} />
         <TrendingStrip initial={trending} />
-        <div className="grid lg:grid-cols-[minmax(0,1fr)_20rem] gap-6 items-start">
+        <div className="grid xl:grid-cols-[minmax(0,1fr)_17rem] gap-6 items-start">
           <LaunchList initial={page.items} initialHasMore={page.hasMore} initialSort={sort} initialWindow={window} initialChain={chain} initialFilter={filter} hasDb={dbConfigured()} />
-          <div className="lg:sticky lg:top-20 min-w-0 space-y-4">
-            <PostsFeed initial={posts} compact />
+          <aside aria-label="Launchpad activity and information" className="grid min-w-0 gap-4 md:grid-cols-2 xl:sticky xl:top-24 xl:grid-cols-1">
             <LaunchTape initial={feed} />
-            <div className="rounded-2xl bg-card border border-line shadow-card p-4 text-[13px] leading-relaxed text-body">
-              <p className="font-semibold text-ink">Why it&apos;s free</p>
-              <p className="mt-1">
-                There is no fee address in the code, on either chain. The factory charges nothing and the locker has no cut — verifiable on-chain. Creators pick a 0–3% trading fee that goes
-                100% to a beneficiary they name, or gets burned.
-              </p>
-              <p className="mt-2">
-                <Link href="/agents" className="text-brand hover:underline underline-offset-4">
-                  Agents can launch too →
-                </Link>
-              </p>
+            <div className="min-w-0 space-y-4">
+              <PostsFeed initial={posts} compact />
+              <section aria-labelledby="free-heading" className="rounded-2xl border border-line bg-paper p-4">
+                <h2 id="free-heading" className="text-sm font-semibold text-ink">Why it&apos;s free</h2>
+                <p className="mt-2 text-pretty text-xs leading-relaxed text-muted">No fee address in the factory. No platform cut in the locker. On either chain.</p>
+                <dl className="mt-4 divide-y divide-line border-y border-line text-xs">
+                  <div className="flex items-center justify-between gap-3 py-2.5"><dt className="text-muted">Platform fee</dt><dd className="font-mono font-bold text-up tnum">$0</dd></div>
+                  <div className="flex items-center justify-between gap-3 py-2.5"><dt className="text-muted">Trading fee</dt><dd className="font-mono text-ink tnum">0 / 1 / 3%</dd></div>
+                </dl>
+                <p className="mt-3 text-pretty text-[11px] leading-relaxed text-muted">Creators choose the trading fee. It goes in full to their beneficiaries, or is burned.</p>
+                <a href="https://github.com/Gitlawb/openlaunch/tree/main/contracts/src" target="_blank" rel="noopener noreferrer" className="mt-3 inline-flex min-h-8 items-center text-xs font-medium text-body underline decoration-line-strong underline-offset-4 hover:text-ink">Read the contracts ↗</a>
+                <div className="mt-3 border-t border-line pt-3"><Link href="/agents" className="inline-flex min-h-8 items-center text-xs font-medium text-brand hover:underline underline-offset-4">Agents can launch too →</Link></div>
+              </section>
             </div>
-          </div>
+          </aside>
         </div>
       </main>
     </>