From 893760751b428778dc59e8e47aa590bda6d71f2a Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Tue, 31 Mar 2026 02:43:45 +0200
Subject: [PATCH] feat: TOC as separate Aero Window on desktop

---
 app/posts/[slug]/page.tsx        | 72 ++++++++++++++++----------------
 components/table-of-contents.tsx |  2 +-
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 0e6e55a..956a993 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -29,36 +29,36 @@ export default async function Post({ params }: PageProps) {
   const postData: PostData = await getPostData(slug);
 
   return (
-    <div className="mx-auto max-w-5xl">
-      <Window title={postData.title} showProgress>
-        <article>
-          <div className="mb-4 text-gray-500 flex flex-col gap-1">
-            <span>
-              {new Date(postData.date).toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              })}
-            </span>
-            <span className="text-sm text-gray-400">{postData.readingTime}</span>
-          </div>
-
-          {postData.wip && (
-            <div className="mb-6 flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
-              <span className="text-lg">🚧</span>
-              <span>This post is a work in progress — content may change.</span>
+    <div className="mx-auto max-w-6xl">
+      <div className="lg:flex lg:gap-4 lg:items-start">
+        <Window title={postData.title} showProgress className="lg:flex-1 min-w-0">
+          <article>
+            <div className="mb-4 text-gray-500 flex flex-col gap-1">
+              <span>
+                {new Date(postData.date).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </span>
+              <span className="text-sm text-gray-400">{postData.readingTime}</span>
             </div>
-          )}
 
-          {/* Mobile TOC — shown above article, hidden on lg+ */}
-          {postData.headings.length > 0 && (
-            <div className="lg:hidden mb-6">
-              <TableOfContents headings={postData.headings} />
-            </div>
-          )}
+            {postData.wip && (
+              <div className="mb-6 flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
+                <span className="text-lg">🚧</span>
+                <span>This post is a work in progress — content may change.</span>
+              </div>
+            )}
 
-          <div className="lg:flex lg:gap-8 lg:items-start">
-            <div className="prose lg:prose-lg max-w-none flex-1 min-w-0">
+            {/* Mobile TOC — inline above article, hidden on lg+ */}
+            {postData.headings.length > 0 && (
+              <div className="lg:hidden mb-6 bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4">
+                <TableOfContents headings={postData.headings} />
+              </div>
+            )}
+
+            <div className="prose lg:prose-lg max-w-none">
               <MDXRemote
                 source={postData.content}
                 options={{
@@ -77,16 +77,18 @@ export default async function Post({ params }: PageProps) {
                 }}
               />
             </div>
+          </article>
+        </Window>
 
-            {/* Desktop TOC sidebar — hidden on mobile */}
-            {postData.headings.length > 0 && (
-              <div className="hidden lg:block w-52 flex-shrink-0">
-                <TableOfContents headings={postData.headings} />
-              </div>
-            )}
+        {/* Desktop TOC — separate Aero Window, sticky on the right */}
+        {postData.headings.length > 0 && (
+          <div className="hidden lg:block w-56 flex-shrink-0 sticky top-8">
+            <Window title="Contents">
+              <TableOfContents headings={postData.headings} />
+            </Window>
           </div>
-        </article>
-      </Window>
+        )}
+      </div>
 
       <div className="mt-8 text-center">
         <Link
diff --git a/components/table-of-contents.tsx b/components/table-of-contents.tsx
index 17abcb8..60a994d 100644
--- a/components/table-of-contents.tsx
+++ b/components/table-of-contents.tsx
@@ -35,7 +35,7 @@ export default function TableOfContents({ headings }: TableOfContentsProps) {
   if (headings.length === 0) return null;
 
   return (
-    <nav className="bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4 lg:sticky lg:top-8">
+    <nav>
       <p className="text-xs font-bold uppercase tracking-widest text-blue-800 mb-3">
         Contents
       </p>