Refactor layout.tsx to include new header buttons and SVG icons for improved UI

src/app/page.tsx

@@ -72,6 +72,19 @@ export default function Home() {
     })),
   ];
 
+  // Helper to recursively collect all posts from the tree
+  function collectPosts(nodes: Node[]): Post[] {
+    let posts: Post[] = [];
+    for (const node of nodes) {
+      if (node.type === 'post') {
+        posts.push(node);
+      } else if (node.type === 'folder') {
+        posts = posts.concat(collectPosts(node.children));
+      }
+    }
+    return posts;
+  }
+
   return (
     <main className="min-h-screen p-8 max-w-4xl mx-auto">
       <h1 className="text-4xl font-bold mb-8">Sebastian Zinkls - Blog</h1>
@@ -89,6 +102,52 @@ export default function Home() {
           </span>
         ))}
       </nav>
+      {/* Pinned posts at the top (only on root) */}
+      {currentPath.length === 0 && (() => {
+        const allPosts = collectPosts(tree);
+        const pinnedPosts = allPosts.filter((post) => post.pinned);
+        if (pinnedPosts.length === 0) return null;
+        return (
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">📌 Pinned Posts</h2>
+            <div className="grid gap-8">
+              {pinnedPosts.map((post) => (
+                <article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow relative">
+                  <span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
+                  <Link href={`/posts/${post.slug}`}>
+                    <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
+                    <div className="text-gray-600 mb-4">
+                      {post.date ? (
+                        <div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
+                      ) : (
+                        <div className="flex flex-col items-center">
+                          <div className="flex">
+                            <span className="text-2xl animate-spin mr-2">⚙️</span>
+                            <span className="text-2xl animate-spin-reverse">⚙️</span>
+                          </div>
+                          <div className="text-xl font-bold mt-2">In Bearbeitung</div>
+                        </div>
+                      )}
+                      <div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
+                    </div>
+                    <p className="text-gray-700 mb-4">{post.summary}</p>
+                    <div className="flex gap-2">
+                      {post.tags.map((tag: string) => (
+                        <span
+                          key={tag}
+                          className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </Link>
+                </article>
+              ))}
+            </div>
+          </div>
+        );
+      })()}
       <div className="grid gap-8">
         {/* Folders */}
         {nodes.filter((n) => n.type === 'folder').map((folder: any) => (