From 13d4ed2f3cb83f9ab72f6864c9fbc44e15b2bdb8 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:17:35 +0000
Subject: [PATCH 01/19] feat(sidebar): add collapsible sidebar with smooth
 animation

  - Add SidebarContext for managing collapsed state
  - Create MinimalHeader with hamburger toggle aligned to sidebar icons
  - Implement AppSidebar component with navigation items
  - Update sidebar-layout with animated width transitions and clipping
  - Adjust sidebar padding to p-3 and hover containment with max-w-9
  - Add pink accent for current page indicator
---
 components/Header/MinimalHeader.tsx         | 208 ++++++++++++++++++++
 components/SideBar/AppSidebar.tsx           | 178 +++++++++++++++++
 components/ui-components/sidebar-layout.tsx |  62 ++++--
 components/ui-components/sidebar.tsx        |  40 ++--
 context/SidebarContext.tsx                  |  57 ++++++
 5 files changed, 507 insertions(+), 38 deletions(-)
 create mode 100644 components/Header/MinimalHeader.tsx
 create mode 100644 components/SideBar/AppSidebar.tsx
 create mode 100644 context/SidebarContext.tsx

diff --git a/components/Header/MinimalHeader.tsx b/components/Header/MinimalHeader.tsx
new file mode 100644
index 00000000..be8599e0
--- /dev/null
+++ b/components/Header/MinimalHeader.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import { api } from "@/server/trpc/react";
+import { usePathname } from "next/navigation";
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  Transition,
+} from "@headlessui/react";
+import { BellIcon, PlusIcon } from "@heroicons/react/20/solid";
+import { Bars3Icon } from "@heroicons/react/24/outline";
+import { signIn, signOut } from "next-auth/react";
+import { PromptLink as Link } from "@/components/PromptService/PromptLink";
+import { Fragment } from "react";
+import { type Session } from "next-auth";
+import Image from "next/image";
+import { MobileSearch, Search } from "@/components/ui/Search";
+import { useSidebar } from "@/context/SidebarContext";
+
+type AlgoliaConfig = {
+  ALGOLIA_APP_ID: string;
+  ALGOLIA_SEARCH_API: string;
+  ALGOLIA_SOURCE_IDX: string;
+};
+
+interface MinimalHeaderProps {
+  session: Session | null;
+  algoliaSearchConfig: AlgoliaConfig;
+  username: string | null;
+}
+
+export function MinimalHeader({
+  session,
+  algoliaSearchConfig,
+  username,
+}: MinimalHeaderProps) {
+  const { data: count } = api.notification.getCount.useQuery(undefined, {
+    enabled: session ? true : false,
+  });
+  const { isCollapsed, toggleSidebar } = useSidebar();
+
+  const pathname = usePathname();
+
+  const userNavigation = [
+    {
+      name: "Your Profile",
+      href: `/${username || "settings"}`,
+    },
+    {
+      name: "Saved posts",
+      href: "/saved",
+    },
+    { name: "Settings", href: "/settings" },
+    { name: "Sign out", onClick: () => signOut() },
+  ];
+
+  const hasNotifications = !!count && count > 0;
+
+  const handleSignInPageNavigation = () => {
+    if (pathname === "/get-started") {
+      return;
+    }
+    signIn();
+  };
+
+  return (
+    <div className="flex min-w-0 flex-1 items-center gap-4">
+      {/* Desktop: Burger menu and Logo on the left */}
+      <div className="hidden items-center gap-2 lg:flex">
+        <button
+          onClick={toggleSidebar}
+          className="-ml-[10px] rounded-md p-1.5 text-neutral-500 hover:bg-neutral-200 dark:text-neutral-400 dark:hover:bg-neutral-800"
+          aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          <Bars3Icon className="h-5 w-5" />
+        </button>
+        <Link to="/">
+          <Image
+            src="/images/codu.png"
+            alt="Codú"
+            height={16}
+            width={64}
+            className="dark:invert-0"
+          />
+        </Link>
+      </div>
+
+      {/* Mobile: Logo in center */}
+      <div className="flex flex-1 justify-center lg:hidden">
+        <Link to="/">
+          <Image
+            src="/images/codu.png"
+            alt="Codú"
+            height={14}
+            width={56}
+            className="dark:invert-0"
+          />
+        </Link>
+      </div>
+
+      {/* Desktop: Search bar - centered */}
+      <div className="hidden flex-1 justify-center lg:flex">
+        <div className="w-full max-w-md">
+          <Search algoliaSearchConfig={algoliaSearchConfig} />
+        </div>
+      </div>
+
+      {/* Mobile: Search icon */}
+      <div className="lg:hidden">
+        <MobileSearch algoliaSearchConfig={algoliaSearchConfig} />
+      </div>
+
+      <div className="flex items-center gap-2">
+        {session ? (
+          <>
+            {/* Create button - desktop only */}
+            <Link
+              className="hidden items-center gap-1 rounded-md bg-pink-500 px-2.5 py-1 text-sm font-medium text-white hover:bg-pink-600 lg:flex"
+              to="/create"
+            >
+              <PlusIcon className="h-4 w-4" />
+              Create
+            </Link>
+
+            {/* Notifications */}
+            <Link
+              to="/notifications"
+              className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
+            >
+              <span className="sr-only">View notifications</span>
+              {hasNotifications && (
+                <div className="absolute right-2 top-2 h-2 w-2 animate-pulse rounded-full bg-pink-600" />
+              )}
+              <BellIcon className="h-6 w-6" aria-hidden="true" />
+            </Link>
+
+            {/* User menu */}
+            <Menu as="div" className="relative">
+              <MenuButton className="flex rounded-full bg-black text-sm ring-offset-2 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus:ring-offset-white dark:ring-offset-zinc-900">
+                <span className="sr-only">Open user menu</span>
+                {session.user?.image ? (
+                  <img
+                    className="h-7 w-7 rounded-full bg-neutral-300 object-cover lg:h-8 lg:w-8"
+                    src={session.user.image}
+                    alt={`${session.user?.name}'s avatar`}
+                  />
+                ) : (
+                  <div className="flex h-7 w-7 items-center justify-center rounded-full bg-black text-sm text-white lg:h-8 lg:w-8">
+                    {session.user?.name?.[0] || "C"}
+                  </div>
+                )}
+              </MenuButton>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <MenuItems className="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-zinc-800 dark:ring-white/10">
+                  {userNavigation.map((item) => (
+                    <MenuItem key={item.name}>
+                      {item.onClick ? (
+                        <button
+                          className="flex w-full rounded px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-zinc-700"
+                          onClick={item.onClick}
+                        >
+                          {item.name}
+                        </button>
+                      ) : (
+                        <Link
+                          className="block rounded px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-zinc-700"
+                          to={item.href || ""}
+                        >
+                          {item.name}
+                        </Link>
+                      )}
+                    </MenuItem>
+                  ))}
+                </MenuItems>
+              </Transition>
+            </Menu>
+          </>
+        ) : (
+          <>
+            <button
+              className="nav-button hidden text-sm lg:block"
+              onClick={handleSignInPageNavigation}
+            >
+              Sign in
+            </button>
+            <button
+              className="primary-button text-sm"
+              onClick={handleSignInPageNavigation}
+            >
+              Sign up
+            </button>
+          </>
+        )}
+
+      </div>
+    </div>
+  );
+}
diff --git a/components/SideBar/AppSidebar.tsx b/components/SideBar/AppSidebar.tsx
new file mode 100644
index 00000000..73855c58
--- /dev/null
+++ b/components/SideBar/AppSidebar.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import type { Session } from "next-auth";
+import {
+  HomeIcon,
+  NewspaperIcon,
+  CalendarIcon,
+  UserIcon,
+  DocumentTextIcon,
+  BookmarkIcon,
+  Cog6ToothIcon,
+} from "@heroicons/react/24/outline";
+import {
+  Sidebar,
+  SidebarBody,
+  SidebarFooter,
+  SidebarSection,
+  SidebarItem,
+  SidebarLabel,
+  SidebarDivider,
+  SidebarHeading,
+  SidebarSpacer,
+} from "@/components/ui-components/sidebar";
+import {
+  sidebarNavigation,
+  sidebarUserNavigation,
+  sidebarFooterNav,
+  githubUrl,
+  twitterUrl,
+  linkedinUrl,
+} from "@/config/site_settings";
+import { useSidebar } from "@/context/SidebarContext";
+import Twitter from "@/icons/x.svg";
+import Github from "@/icons/github.svg";
+import Linkedin from "@/icons/linkedin.svg";
+
+const iconMap = {
+  HomeIcon,
+  NewspaperIcon,
+  CalendarIcon,
+  UserIcon,
+  DocumentTextIcon,
+  BookmarkIcon,
+  Cog6ToothIcon,
+};
+
+const socialLinks = [
+  {
+    name: "Twitter",
+    href: twitterUrl,
+    Icon: Twitter,
+    customStyle: "hover:bg-twitter focus:bg-twitter",
+  },
+  {
+    name: "GitHub",
+    href: githubUrl,
+    Icon: Github,
+    customStyle: "hover:bg-github focus:bg-github",
+  },
+  {
+    name: "LinkedIn",
+    href: linkedinUrl,
+    Icon: Linkedin,
+    customStyle: "hover:bg-[#0A66C2] focus:bg-[#0A66C2]",
+  },
+];
+
+interface AppSidebarProps {
+  session: Session | null;
+  username: string | null;
+}
+
+export function AppSidebar({ session, username }: AppSidebarProps) {
+  const pathname = usePathname();
+  const { isCollapsed } = useSidebar();
+
+  const isActive = (href: string) => {
+    if (href === "/") return pathname === "/";
+    return pathname.startsWith(href);
+  };
+
+  const getUserNavHref = (href: string, dynamic?: boolean) => {
+    if (dynamic && username) {
+      return `/${username}`;
+    }
+    return href;
+  };
+
+  return (
+    <Sidebar className="bg-neutral-100 dark:bg-black">
+      <SidebarBody>
+        <SidebarSection>
+          {sidebarNavigation.map((item) => {
+            const Icon = iconMap[item.icon as keyof typeof iconMap];
+            return (
+              <SidebarItem
+                key={item.name}
+                href={item.href}
+                current={isActive(item.href)}
+              >
+                {Icon && (
+                  <Icon
+                    className={`!size-5 shrink-0 ${isActive(item.href) ? "text-neutral-800 dark:text-white" : "text-neutral-400"}`}
+                  />
+                )}
+                <SidebarLabel className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>
+                  {item.name}
+                </SidebarLabel>
+              </SidebarItem>
+            );
+          })}
+        </SidebarSection>
+
+        {session && (
+          <>
+            <SidebarDivider />
+            <SidebarSection>
+              <SidebarHeading className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>Account</SidebarHeading>
+              {sidebarUserNavigation.map((item) => {
+                const Icon = iconMap[item.icon as keyof typeof iconMap];
+                const href = getUserNavHref(
+                  item.href,
+                  "dynamic" in item ? item.dynamic : false,
+                );
+                return (
+                  <SidebarItem
+                    key={item.name}
+                    href={href}
+                    current={isActive(href)}
+                  >
+                    {Icon && (
+                      <Icon
+                        className={`!size-5 shrink-0 ${isActive(href) ? "text-neutral-800 dark:text-white" : "text-neutral-400"}`}
+                      />
+                    )}
+                    <SidebarLabel className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>
+                      {item.name}
+                    </SidebarLabel>
+                  </SidebarItem>
+                );
+              })}
+            </SidebarSection>
+          </>
+        )}
+
+        <SidebarSpacer />
+
+        <SidebarSection className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>
+          {sidebarFooterNav.map((item) => (
+            <SidebarItem key={item.name} href={item.href}>
+              <SidebarLabel className="text-xs text-neutral-500 dark:text-neutral-400">
+                {item.name}
+              </SidebarLabel>
+            </SidebarItem>
+          ))}
+        </SidebarSection>
+      </SidebarBody>
+
+      <SidebarFooter className={`border-t-0 transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>
+        <div className="flex items-center justify-center gap-4 py-2">
+          {socialLinks.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`focus-style rounded-md p-1 text-neutral-400 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.customStyle.toLowerCase()}`}
+            >
+              <span className="sr-only">{item.name}</span>
+              <item.Icon className="h-5 w-5" aria-hidden="true" />
+            </a>
+          ))}
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
diff --git a/components/ui-components/sidebar-layout.tsx b/components/ui-components/sidebar-layout.tsx
index f3e9f1bc..7c90de05 100644
--- a/components/ui-components/sidebar-layout.tsx
+++ b/components/ui-components/sidebar-layout.tsx
@@ -4,10 +4,10 @@ import * as Headless from "@headlessui/react";
 import React, { useState } from "react";
 import { NavbarItem } from "./navbar";
 
-function OpenMenuIcon() {
+function MenuIcon() {
   return (
-    <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true">
-      <path d="M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z" />
+    <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true" fill="currentColor">
+      <path fillRule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
     </svg>
   );
 }
@@ -29,13 +29,13 @@ function MobileSidebar({
     <Headless.Dialog open={open} onClose={close} className="lg:hidden">
       <Headless.DialogBackdrop
         transition
-        className="fixed inset-0 bg-black/30 transition data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
+        className="fixed inset-0 z-40 bg-black/30 transition data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
       />
       <Headless.DialogPanel
         transition
-        className="fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-[closed]:-translate-x-full"
+        className="fixed inset-y-0 z-50 w-full max-w-80 p-2 transition duration-300 ease-in-out data-[closed]:-translate-x-full"
       >
-        <div className="flex h-full flex-col rounded-lg bg-white shadow-sm ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10">
+        <div className="flex h-full flex-col rounded-lg bg-neutral-100 shadow-sm ring-1 ring-neutral-200 dark:bg-black dark:ring-neutral-800">
           <div className="-mb-3 px-4 pt-3">
             <Headless.CloseButton as={NavbarItem} aria-label="Close navigation">
               <CloseMenuIcon />
@@ -48,20 +48,44 @@ function MobileSidebar({
   );
 }
 
+interface SidebarLayoutProps {
+  navbar: React.ReactNode;
+  sidebar: React.ReactNode;
+  children: React.ReactNode;
+  isCollapsed?: boolean;
+}
+
 export function SidebarLayout({
   navbar,
   sidebar,
   children,
-}: React.PropsWithChildren<{
-  navbar: React.ReactNode;
-  sidebar: React.ReactNode;
-}>) {
+  isCollapsed = false,
+}: SidebarLayoutProps) {
   const [showSidebar, setShowSidebar] = useState(false);
 
+  const contentPadding = isCollapsed ? "lg:pl-16" : "lg:pl-64";
+
   return (
-    <div className="relative isolate flex min-h-svh w-full bg-white dark:bg-zinc-900 max-lg:flex-col lg:bg-zinc-100 dark:lg:bg-zinc-950">
-      {/* Sidebar on desktop */}
-      <div className="fixed inset-y-0 left-0 w-64 max-lg:hidden">{sidebar}</div>
+    <div className="relative isolate flex min-h-svh w-full bg-neutral-100 dark:bg-black max-lg:flex-col">
+      {/* Desktop navbar - completely independent, full width, above everything */}
+      <header className="fixed left-0 right-0 top-0 z-50 hidden h-16 items-center border-b border-neutral-200 bg-neutral-100 px-6 dark:border-neutral-800 dark:bg-black lg:flex">
+        {navbar}
+      </header>
+
+      {/* Sidebar on desktop - starts below navbar */}
+      {/* Outer frame: animates width, has border */}
+      <div
+        data-collapsed={isCollapsed ? "true" : undefined}
+        className={`fixed top-16 bottom-0 left-0 z-30 max-lg:hidden border-r border-neutral-200 dark:border-neutral-800 transition-all duration-300 ease-in-out ${isCollapsed ? "w-16" : "w-64"}`}
+      >
+        {/* Middle: clips content */}
+        <div className="h-full overflow-hidden">
+          {/* Inner: fixed width, content doesn't move */}
+          <div className="w-64 h-full">
+            {sidebar}
+          </div>
+        </div>
+      </div>
 
       {/* Sidebar on mobile */}
       <MobileSidebar open={showSidebar} close={() => setShowSidebar(false)}>
@@ -69,23 +93,23 @@ export function SidebarLayout({
       </MobileSidebar>
 
       {/* Navbar on mobile */}
-      <header className="flex items-center px-4 lg:hidden">
+      <header className="flex items-center border-b border-neutral-200 px-4 dark:border-neutral-800 lg:hidden">
         <div className="py-2.5">
           <NavbarItem
             onClick={() => setShowSidebar(true)}
             aria-label="Open navigation"
           >
-            <OpenMenuIcon />
+            <MenuIcon />
           </NavbarItem>
         </div>
         <div className="min-w-0 flex-1">{navbar}</div>
       </header>
 
       {/* Content */}
-      <main className="flex flex-1 flex-col pb-2 lg:min-w-0 lg:pl-64 lg:pr-2 lg:pt-2">
-        <div className="grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-sm lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
-          <div className="mx-auto max-w-6xl">{children}</div>
-        </div>
+      <main
+        className={`flex flex-1 flex-col lg:min-w-0 lg:pt-16 transition-all duration-300 ease-in-out ${contentPadding}`}
+      >
+        <div className="grow">{children}</div>
       </main>
     </div>
   );
diff --git a/components/ui-components/sidebar.tsx b/components/ui-components/sidebar.tsx
index 953ec1ac..a43946fe 100644
--- a/components/ui-components/sidebar.tsx
+++ b/components/ui-components/sidebar.tsx
@@ -29,7 +29,7 @@ export function SidebarHeader({
       {...props}
       className={clsx(
         className,
-        "flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5",
+        "flex flex-col p-3 [&>[data-slot=section]+[data-slot=section]]:mt-2.5",
       )}
     />
   );
@@ -44,7 +44,7 @@ export function SidebarBody({
       {...props}
       className={clsx(
         className,
-        "flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8",
+        "flex flex-1 flex-col overflow-y-auto p-3 [&>[data-slot=section]+[data-slot=section]]:mt-8",
       )}
     />
   );
@@ -59,7 +59,7 @@ export function SidebarFooter({
       {...props}
       className={clsx(
         className,
-        "flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5",
+        "flex flex-col p-3 [&>[data-slot=section]+[data-slot=section]]:mt-2.5",
       )}
     />
   );
@@ -91,7 +91,7 @@ export function SidebarDivider({
       {...props}
       className={clsx(
         className,
-        "my-4 border-t border-zinc-950/5 dark:border-white/5 lg:-mx-4",
+        "my-4 border-t border-neutral-200 dark:border-neutral-800 -mx-3",
       )}
     />
   );
@@ -119,7 +119,7 @@ export function SidebarHeading({
       {...props}
       className={clsx(
         className,
-        "mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400",
+        "mb-1 px-2 text-xs/6 font-medium text-neutral-500 dark:text-neutral-400",
       )}
     />
   );
@@ -138,25 +138,27 @@ export const SidebarItem = forwardRef(function SidebarItem(
   ref: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>,
 ) {
   const classes = clsx(
-    // Base
-    "flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5",
-    // Leading icon/icon-only
-    "data-[slot=icon]:*:size-6 data-[slot=icon]:*:shrink-0 data-[slot=icon]:*:fill-zinc-500 sm:data-[slot=icon]:*:size-5",
+    // Base - inactive text and icons same grey
+    "flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-neutral-400 sm:py-2 sm:text-sm/5",
+    // Collapsed state - animate max-width to contain hover area (matches container 300ms animation)
+    "max-w-full transition-[max-width] duration-300 ease-in-out [[data-collapsed=true]_&]:max-w-9",
+    // Leading icon/icon-only - same grey as text
+    "data-[slot=icon]:*:size-6 data-[slot=icon]:*:shrink-0 data-[slot=icon]:*:text-neutral-400 sm:data-[slot=icon]:*:size-5",
     // Trailing icon (down chevron or similar)
     "data-[slot=icon]:last:*:ml-auto data-[slot=icon]:last:*:size-5 sm:data-[slot=icon]:last:*:size-4",
     // Avatar
     "data-[slot=avatar]:*:-m-0.5 data-[slot=avatar]:*:size-7 data-[slot=avatar]:*:[--ring-opacity:10%] sm:data-[slot=avatar]:*:size-6",
     // Hover
-    "data-[hover]:bg-zinc-950/5 data-[slot=icon]:*:data-[hover]:fill-zinc-950",
+    "data-[hover]:bg-neutral-200 data-[hover]:text-neutral-800 data-[slot=icon]:*:data-[hover]:text-neutral-800",
     // Active
-    "data-[active]:bg-zinc-950/5 data-[slot=icon]:*:data-[active]:fill-zinc-950",
-    // Current
-    "data-[slot=icon]:*:data-[current]:fill-zinc-950",
-    // Dark mode
-    "dark:text-white dark:data-[slot=icon]:*:fill-zinc-400",
-    "dark:data-[hover]:bg-white/5 dark:data-[slot=icon]:*:data-[hover]:fill-white",
-    "dark:data-[active]:bg-white/5 dark:data-[slot=icon]:*:data-[active]:fill-white",
-    "dark:data-[slot=icon]:*:data-[current]:fill-white",
+    "data-[active]:bg-neutral-200 data-[active]:text-neutral-800 data-[slot=icon]:*:data-[active]:text-neutral-800",
+    // Current - text and icons become dark when active
+    "data-[current]:text-neutral-800 data-[slot=icon]:*:data-[current]:text-neutral-800",
+    // Dark mode - inactive text and icons same grey
+    "dark:text-neutral-400 dark:data-[slot=icon]:*:text-neutral-400",
+    "dark:data-[hover]:bg-neutral-900 dark:data-[hover]:text-white dark:data-[slot=icon]:*:data-[hover]:text-white",
+    "dark:data-[active]:bg-neutral-900 dark:data-[active]:text-white dark:data-[slot=icon]:*:data-[active]:text-white",
+    "dark:data-[current]:text-white dark:data-[slot=icon]:*:data-[current]:text-white",
   );
 
   return (
@@ -164,7 +166,7 @@ export const SidebarItem = forwardRef(function SidebarItem(
       {current && (
         <motion.span
           layoutId="current-indicator"
-          className="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"
+          className="absolute inset-y-2 -left-3 w-0.5 rounded-full bg-pink-600"
         />
       )}
       {"href" in props ? (
diff --git a/context/SidebarContext.tsx b/context/SidebarContext.tsx
new file mode 100644
index 00000000..27d09a51
--- /dev/null
+++ b/context/SidebarContext.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useCallback,
+  type ReactNode,
+} from "react";
+import useLocalStorage from "@/hooks/useLocalStorage";
+
+interface SidebarContextValue {
+  isCollapsed: boolean;
+  toggleSidebar: () => void;
+  setCollapsed: (collapsed: boolean) => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue | undefined>(
+  undefined,
+);
+
+interface SidebarProviderProps {
+  children: ReactNode;
+}
+
+export function SidebarProvider({ children }: SidebarProviderProps) {
+  const [isCollapsed, setIsCollapsed] = useLocalStorage<boolean>(
+    "sidebar-collapsed",
+    false,
+  );
+
+  const toggleSidebar = useCallback(() => {
+    setIsCollapsed(!isCollapsed);
+  }, [isCollapsed, setIsCollapsed]);
+
+  const setCollapsed = useCallback(
+    (collapsed: boolean) => {
+      setIsCollapsed(collapsed);
+    },
+    [setIsCollapsed],
+  );
+
+  return (
+    <SidebarContext.Provider
+      value={{ isCollapsed, toggleSidebar, setCollapsed }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar(): SidebarContextValue {
+  const context = useContext(SidebarContext);
+  if (context === undefined) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}

From 568f8bab26e0426e130b1891b7d5c2bda8c5c108 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:18:52 +0000
Subject: [PATCH 02/19] feat(layout): integrate collapsible sidebar into app
 layout

---
 app/(app)/layout.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index cdb45497..19bd6261 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -1,8 +1,6 @@
 import { headers } from "next/headers";
 import ThemeProvider from "@/components/Theme/ThemeProvider";
 import { TRPCReactProvider } from "@/server/trpc/react";
-import Footer from "@/components/Footer/Footer";
-import Nav from "@/components/Nav/Nav";
 import { getServerAuthSession } from "@/server/auth";
 import AuthProvider from "@/context/AuthProvider";
 import ProgressBar from "@/components/ProgressBar/ProgressBar";
@@ -11,6 +9,7 @@ import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";
+import { SidebarAppLayout } from "@/components/Layout/SidebarAppLayout";
 
 export const metadata = {
   title: "Codú - Join Our Web Developer Community",
@@ -78,14 +77,12 @@ export default async function RootLayout({
     : null;
 
   return (
-    <>
-      <Nav
-        session={session}
-        algoliaSearchConfig={algoliaSearchConfig}
-        username={userData?.username || null}
-      />
+    <SidebarAppLayout
+      session={session}
+      algoliaSearchConfig={algoliaSearchConfig}
+      username={userData?.username || null}
+    >
       {children}
-      <Footer />
-    </>
+    </SidebarAppLayout>
   );
 }

From aeb4c4f8549c7e5d7bfc28abf6d6bf3d1fd9c5b5 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:19:22 +0000
Subject: [PATCH 03/19] feat(config): add sidebar navigation items and social
 link

---
 config/site_settings.ts | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/config/site_settings.ts b/config/site_settings.ts
index 59f22114..ad24d82d 100644
--- a/config/site_settings.ts
+++ b/config/site_settings.ts
@@ -28,5 +28,44 @@ export const discordInviteUrl = "https://discord.gg/NxSkYtZ";
 export const githubUrl = "https://github.com/codu-code/codu";
 export const twitterUrl = "https://twitter.com/coducommunity";
 export const youtubeUrl = "https://www.youtube.com/c/Cod%C3%BACommunity";
+export const linkedinUrl = "https://www.linkedin.com/company/codu-community";
 
 export const articlesDirectory = "/content/articles";
+
+// Sidebar navigation configuration
+export const sidebarNavigation = [
+  { name: "Home", href: "/", icon: "HomeIcon" },
+  { name: "Feed", href: "/feed", icon: "NewspaperIcon" },
+  {
+    name: "Events",
+    href: "https://www.meetup.com/codu-community/",
+    icon: "CalendarIcon",
+    external: true,
+  },
+] as const;
+
+export const sidebarUserNavigation = [
+  { name: "Your Profile", href: "/profile", icon: "UserIcon", dynamic: true },
+  { name: "Your Posts", href: "/my-posts", icon: "DocumentTextIcon" },
+  { name: "Saved", href: "/saved", icon: "BookmarkIcon" },
+  { name: "Settings", href: "/settings", icon: "Cog6ToothIcon" },
+] as const;
+
+export const sidebarFooterNav = [
+  { name: "Privacy Policy", href: "/privacy" },
+  { name: "Code Of Conduct", href: "/code-of-conduct" },
+  { name: "Advertise", href: "/advertise" },
+] as const;
+
+// Feature flag for future Following feature
+export const followingSection = {
+  enabled: false,
+  title: "Following",
+} as const;
+
+export const socialLinks = [
+  { name: "Discord", href: discordInviteUrl, icon: "discord" },
+  { name: "GitHub", href: githubUrl, icon: "github" },
+  { name: "Twitter", href: twitterUrl, icon: "twitter" },
+  { name: "YouTube", href: youtubeUrl, icon: "youtube" },
+] as const;

From d669068eb0e978b739a260414941acc1d430bf8e Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:20:06 +0000
Subject: [PATCH 04/19] refactor(pages): update feed, home, and articles layout
 styling

---
 app/(app)/articles/_client.tsx |  2 +-
 app/(app)/feed/_client.tsx     | 84 +++++++++++++++++-----------------
 app/(app)/page.tsx             | 14 +++---
 3 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/app/(app)/articles/_client.tsx b/app/(app)/articles/_client.tsx
index faddbad7..280ed572 100644
--- a/app/(app)/articles/_client.tsx
+++ b/app/(app)/articles/_client.tsx
@@ -432,7 +432,7 @@ const ArticlesPage = () => {
   return (
     <>
       <div className="mx-2">
-        <div className="mt-8 flex max-w-5xl items-center justify-between border-b border-b-neutral-300 pb-2 dark:border-b-neutral-600 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+        <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
           <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
             {typeof tag === "string" ? (
               <div className="flex items-center justify-center">
diff --git a/app/(app)/feed/_client.tsx b/app/(app)/feed/_client.tsx
index 5a427d5b..b3a4eda6 100644
--- a/app/(app)/feed/_client.tsx
+++ b/app/(app)/feed/_client.tsx
@@ -108,7 +108,7 @@ const FeedPage = () => {
   return (
     <main className="mx-2">
       {/* Header */}
-      <div className="mt-8 flex max-w-5xl items-center justify-between border-b border-b-neutral-300 pb-2 dark:border-b-neutral-600 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+      <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
         <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
           Feed
         </h1>
@@ -203,51 +203,53 @@ const FeedPage = () => {
 
         {/* Sidebar */}
         <section className="col-span-5 hidden lg:block">
-          {/* About section - moved above topics */}
-          <div className="mt-4 rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-700 dark:bg-neutral-800">
-            <h3 className="mb-2 font-semibold text-neutral-900 dark:text-neutral-100">
-              About the Feed
-            </h3>
-            <p className="text-sm text-neutral-600 dark:text-neutral-400">
-              Curated developer content from across the web. Upvote articles you
-              find helpful, save them for later, and discover trending topics in
-              the developer community.
-            </p>
-          </div>
-
-          {/* Categories section */}
-          <div className="mt-6">
-            <h3 className="mb-4 text-2xl font-semibold leading-6 tracking-wide">
-              Topics
-            </h3>
-            <div className="flex flex-wrap gap-2">
-              {categoriesData?.map((cat) => (
-                <button
-                  key={cat}
-                  onClick={() =>
-                    handleCategoryChange(category === cat ? null : cat)
-                  }
-                  className={`rounded border px-4 py-2 text-sm capitalize transition-colors ${
-                    category === cat
-                      ? "border-orange-500 bg-orange-50 text-orange-700 dark:border-orange-400 dark:bg-orange-950 dark:text-orange-300"
-                      : "border-neutral-300 bg-white text-neutral-700 hover:border-neutral-400 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:border-neutral-500"
-                  }`}
-                >
-                  {cat}
-                </button>
-              ))}
+          <div className="sticky top-20">
+            {/* About section - aligned with first feed item */}
+            <div className="mt-2 rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-700 dark:bg-neutral-800">
+              <h3 className="mb-2 font-semibold text-neutral-900 dark:text-neutral-100">
+                About the Feed
+              </h3>
+              <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                Curated developer content from across the web. Upvote articles you
+                find helpful, save them for later, and discover trending topics in
+                the developer community.
+              </p>
             </div>
-          </div>
 
-          {/* Saved articles for logged in users */}
-          {session && (
+            {/* Categories section */}
             <div className="mt-6">
-              <h3 className="mb-4 text-lg font-semibold leading-6 tracking-wide">
-                Your Saved Articles
+              <h3 className="mb-4 text-2xl font-semibold leading-6 tracking-wide">
+                Topics
               </h3>
-              <SavedArticlesPreview />
+              <div className="flex flex-wrap gap-2">
+                {categoriesData?.map((cat) => (
+                  <button
+                    key={cat}
+                    onClick={() =>
+                      handleCategoryChange(category === cat ? null : cat)
+                    }
+                    className={`rounded border px-4 py-2 text-sm capitalize transition-colors ${
+                      category === cat
+                        ? "border-orange-500 bg-orange-50 text-orange-700 dark:border-orange-400 dark:bg-orange-950 dark:text-orange-300"
+                        : "border-neutral-300 bg-white text-neutral-700 hover:border-neutral-400 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:border-neutral-500"
+                    }`}
+                  >
+                    {cat}
+                  </button>
+                ))}
+              </div>
             </div>
-          )}
+
+            {/* Saved articles for logged in users */}
+            {session && (
+              <div className="mt-6">
+                <h3 className="mb-4 text-lg font-semibold leading-6 tracking-wide">
+                  Your Saved Articles
+                </h3>
+                <SavedArticlesPreview />
+              </div>
+            )}
+          </div>
         </section>
       </div>
     </main>
diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index 848dfca6..7a3f3125 100644
--- a/app/(app)/page.tsx
+++ b/app/(app)/page.tsx
@@ -14,9 +14,9 @@ const Home = async () => {
 
   return (
     <main>
-      <div>
-        <Hero />
-        {session == null && (
+      {!session && (
+        <div>
+          <Hero />
           <section className="bg-white px-2 dark:bg-neutral-300" id="cta">
             <div className="mx-auto py-20 sm:max-w-2xl sm:py-32 lg:max-w-5xl">
               <h2 className="max-w-[660px] text-center text-2xl font-semibold tracking-tight text-neutral-900 dark:text-gray-900 sm:text-4xl md:text-left">
@@ -37,11 +37,11 @@ const Home = async () => {
               </div>
             </div>
           </section>
-        )}
-      </div>
+        </div>
+      )}
 
       <div className="mx-2" id={session ? "cta" : ""}>
-        <div className="mt-6 flex max-w-5xl items-center justify-between border-b border-b-neutral-300 pb-2 dark:border-b-neutral-600 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+        <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
           <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
             Trending
           </h3>
@@ -51,6 +51,7 @@ const Home = async () => {
             <TrendingPosts session={session} />
           </Suspense>
           <section className="col-span-5 hidden lg:block">
+            <div className="sticky top-20">
             <CoduChallenge />
             <h4 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
               Popular topics
@@ -65,6 +66,7 @@ const Home = async () => {
                 <SideBarSavedPosts />
               </div>
             )}
+            </div>
           </section>
         </div>
       </div>

From 5c2331bf929bd0de3ca0e71299dc1c5a3998a4fb Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:20:32 +0000
Subject: [PATCH 05/19] feat(settings): update settings page styling

---
 app/(app)/settings/_client.tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/app/(app)/settings/_client.tsx b/app/(app)/settings/_client.tsx
index b39f45ca..cc2979b3 100644
--- a/app/(app)/settings/_client.tsx
+++ b/app/(app)/settings/_client.tsx
@@ -12,7 +12,7 @@ import { saveSettingsSchema } from "@/schema/profile";
 import { uploadFile } from "@/utils/s3helpers";
 import type { user } from "@/server/db/schema";
 import { Button } from "@/components/ui-components/button";
-import { Loader2 } from "lucide-react";
+import { Loader2, Sun, Moon } from "lucide-react";
 import { Subheading, Heading } from "@/components/ui-components/heading";
 import { Avatar } from "@/components/ui-components/avatar";
 import { Input } from "@/components/ui-components/input";
@@ -25,6 +25,7 @@ import { Textarea } from "@/components/ui-components/textarea";
 import { Switch } from "@/components/ui-components/switch";
 import { Divider } from "@/components/ui-components/divider";
 import { Text } from "@/components/ui-components/text";
+import { useTheme } from "next-themes";
 
 type User = Pick<
   typeof user.$inferSelect,
@@ -59,6 +60,7 @@ const Settings = ({ profile }: { profile: User }) => {
     },
   });
 
+  const { setTheme, resolvedTheme } = useTheme();
   const { emailNotifications: eNotifications, newsletter } = profile;
 
   const [emailNotifications, setEmailNotifications] = useState(eNotifications);
@@ -433,6 +435,33 @@ const Settings = ({ profile }: { profile: User }) => {
 
       <Divider className="my-10" soft />
 
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Appearance</Subheading>
+          <Text>Choose your preferred theme</Text>
+        </div>
+        <Field className="flex items-center justify-between">
+          <Label passive className="flex flex-col">
+            <span>Theme</span>
+            <Text className="text-xs text-gray-500">
+              Toggle between light and dark theme
+            </Text>
+          </Label>
+
+          <div className="flex items-center gap-2">
+            <Sun className="h-4 w-4 text-neutral-400 dark:text-neutral-500" />
+            <Switch
+              color="pink"
+              checked={resolvedTheme === "dark"}
+              onChange={(checked) => setTheme(checked ? "dark" : "light")}
+            />
+            <Moon className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
+          </div>
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
       <div className="flex justify-end space-x-4">
         <Button color="dark/white" onClick={() => reset()}>
           Reset

From 8f607f2142c99460be3326e9560e6bf6b3f2c197 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:20:54 +0000
Subject: [PATCH 06/19] refactor(theme): simplify theme provider and remove
 unused nav code

---
 components/Nav/Nav.tsx             | 6 ------
 components/Theme/ThemeProvider.tsx | 6 +++++-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
index 299617fe..273f92c5 100644
--- a/components/Nav/Nav.tsx
+++ b/components/Nav/Nav.tsx
@@ -16,7 +16,6 @@ import { PromptLink as Link } from "../PromptService/PromptLink";
 import { Fragment } from "react";
 import { navigation } from "../../config/site_settings";
 import { type Session } from "next-auth";
-import ThemeToggle from "../Theme/ThemeToggle/ThemeToggle";
 import AnimatedHamburger from "./AnimatedHamburger";
 import Logo from "@/icons/logo.svg";
 import MobileNav from "./MobileNav";
@@ -147,10 +146,6 @@ const Nav = ({
                     </>
                   )}
 
-                  <div className="ml-3">
-                    <ThemeToggle />
-                  </div>
-
                   {session && (
                     <>
                       <Link
@@ -220,7 +215,6 @@ const Nav = ({
               </div>
               <div className="-mr-2 flex items-center md:hidden">
                 <MobileSearch algoliaSearchConfig={algoliaSearchConfig} />
-                <ThemeToggle />
                 {session && (
                   <Link
                     to="/notifications"
diff --git a/components/Theme/ThemeProvider.tsx b/components/Theme/ThemeProvider.tsx
index e9e257c4..bdf7e655 100644
--- a/components/Theme/ThemeProvider.tsx
+++ b/components/Theme/ThemeProvider.tsx
@@ -4,7 +4,11 @@ import { type ReactNode } from "react";
 import { ThemeProvider } from "next-themes";
 
 const Providers = ({ children }: { children: ReactNode }) => {
-  return <ThemeProvider attribute="class">{children}</ThemeProvider>;
+  return (
+    <ThemeProvider attribute="class" defaultTheme="dark">
+      {children}
+    </ThemeProvider>
+  );
 };
 
 export default Providers;

From a992efc1bbda971f7bde0893ceaf8aeee63447db Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:21:16 +0000
Subject: [PATCH 07/19] refactor(ui): update link component and trending posts
 loading styles

---
 .../TrendingPosts/TrendingPostsLoading.tsx    | 10 ++++----
 components/ui-components/link.tsx             | 23 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/components/TrendingPosts/TrendingPostsLoading.tsx b/components/TrendingPosts/TrendingPostsLoading.tsx
index 2cceaf67..8357c67d 100644
--- a/components/TrendingPosts/TrendingPostsLoading.tsx
+++ b/components/TrendingPosts/TrendingPostsLoading.tsx
@@ -2,10 +2,12 @@ import { FeedItemLoading } from "@/components/Feed";
 
 function LoadingTrendingPosts() {
   return (
-    <div>
-      {Array.from({ length: 5 }, (_, i) => (
-        <FeedItemLoading key={i} />
-      ))}
+    <div className="relative md:col-span-7">
+      <section>
+        {Array.from({ length: 5 }, (_, i) => (
+          <FeedItemLoading key={i} />
+        ))}
+      </section>
     </div>
   );
 }
diff --git a/components/ui-components/link.tsx b/components/ui-components/link.tsx
index 772cf4bc..2c8dcc8b 100644
--- a/components/ui-components/link.tsx
+++ b/components/ui-components/link.tsx
@@ -1,22 +1,25 @@
-/**
- * TODO: Update this component to use your client-side framework's link
- * component. We've provided examples of how to do this for Next.js, Remix, and
- * Inertia.js in the Catalyst documentation:
- *
- * https://catalyst.tailwindui.com/docs#client-side-router-integration
- */
-
 import * as Headless from "@headlessui/react";
+import NextLink from "next/link";
 import React, { forwardRef } from "react";
 
 export const Link = forwardRef(function Link(
   props: { href: string } & React.ComponentPropsWithoutRef<"a">,
   ref: React.ForwardedRef<HTMLAnchorElement>,
 ) {
+  const isExternal =
+    props.href.startsWith("http") || props.href.startsWith("//");
+
+  if (isExternal) {
+    return (
+      <Headless.DataInteractive>
+        <a {...props} ref={ref} target="_blank" rel="noopener noreferrer" />
+      </Headless.DataInteractive>
+    );
+  }
+
   return (
     <Headless.DataInteractive>
-      {/* eslint-disable jsx-a11y/anchor-has-content  */}
-      <a {...props} ref={ref} />
+      <NextLink {...props} ref={ref} />
     </Headless.DataInteractive>
   );
 });

From ee36ad96023203214712ac2a509bcfa2d6ff0d2f Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:21:34 +0000
Subject: [PATCH 08/19] =?UTF-8?q?chore(assets):=20add=20LinkedIn=20icon=20?=
 =?UTF-8?q?and=20Cod=C3=BA=20logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 icons/linkedin.svg          |   3 +++
 public/images/codu-logo.png | Bin 0 -> 6793 bytes
 2 files changed, 3 insertions(+)
 create mode 100644 icons/linkedin.svg
 create mode 100644 public/images/codu-logo.png

diff --git a/icons/linkedin.svg b/icons/linkedin.svg
new file mode 100644
index 00000000..fb8574a6
--- /dev/null
+++ b/icons/linkedin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 50 50">
+  <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"/>
+</svg>
diff --git a/public/images/codu-logo.png b/public/images/codu-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4f9e5d810b89b6995c4e8c651efe48ffa535c9d
GIT binary patch
literal 6793
zcmV;48g}K0P)<h;3K|Lk000e1NJLTq00GYc005Q<1^@s6xQ+v$00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH8XieRK~#7F?VXEt
zRJqcHce5q{{s`s}0T97$A{cH2V<H$P0!#!z1olJ#M9@7Ez(mkzB7i>u*Oe@_-EH^d
zJWB8VttHxE<L;v^siab=v_P{gAac{0FJ74P)D-*muRC8q^*`7h`33!f*MI%%ZCNZ9
zJsM?Uihz*%5s{^N`P~%z+WCL}?#ov*4txQrjs+UQH1H0taX-g>BY%pp{KS1H`p3SS
zj`SUbkmB)U$`#yra*E!RS1nJbYouD^=^OTIQ~m?jxI-Jtp;&{uHsz~*WrwN^F1ee)
zj4#$>wZiam#rFGGoIKY<RmRi1Pkw_lnjOlZH^sVjtb1p@{YQ?$xj-ezK7L~U4dW-|
z)_}g`g!wqWZae?ipPXz2#LfUsd1uNGDW8ogSK=BFAtXb5Kb^`7YSgjzF?I4(j*sC#
zI3_CMEBmc&h*B>rQ!YRV$p+IWU(0-!Ah-DX9J=s%cj$LC6Sy-6IXy$Em5nJMgflM^
z6OKp+5w{AO%N4XKP%m*~`EYJ-|9l5B9BVkd0cpu-9^y)9L<vcT>3`p3J{vTSj5VD5
zydC;J&CUVEtu#LfdB~N}h>`<v!59`%0u3Yc45!5|q7s~**za9WkRjsTv*t@XLmNEH
zXow3_Hog(&as-EDK>Sge=9&!0kL#D1haK}0*oFPxm0imh7bNom`JBtlo!*r9i^bv^
zgph#TW+hXZpP2sI+^j>%aBi^~+@2vJ*$61Zvvt&u?VjV6S)1~PXUND=cw}`pS}xbt
zjHj~U-12{>8h;`YS-5RY#r^?z=y-YbXV4JSy44cil?&1!0~!qtCrN-CljIWmB=t@v
zo&9jN8H^sxrAdf7Cs&>$JVvdoJOiybx3szP9J1OZlj%&cA@vNlB1vh=H_6zkJpvof
zpD7KeCA#tSk+e1-=p)W7yXj?`g{@nA%;y6ma!D#4_hDL?76@!OEq^01QCqTi(|(4#
zLzBeACRcuydZtE5=`djEJP{11<-e)#NsYGhl$*ONd}ui1W9yuOL^~{wd`*Zx?fB46
z8&0))_>#i~<59*9Q=z|`muuvSU5)i{tFwRo*V}UY{f8?y?*`p1oiES*-<QafSG(7q
z5wZu5vYdr0&*MZ|arVe081fecCQ^ltp@%yYX?^D7E~EB?i#MhxU7+GF%e7?*cOiF&
z^w@h&*HDL}Zmx_{h7yvAv}QPiBlB|@YOxY`g;|G0h)ZsNA!)BsYd#@0A#)HVP!SSm
zoZm<*`Mf2);arI`nAt^|%Do}gxS?SbAj9EiD0zS=fl81$<NVFwpWH~ThV$VVBk2t1
z_SW$w3c-BV7p7cGBtQt6j3|K$5Up|kv=QA1SDZnyM)Oh%KF=s_HG1tEODMj95HcB2
z0)-<<U9}auge1P<%+6@el~tS(y_7Iqfe<noQ33@c+~d^6Jm?=1m#dm9SMFD$lexM3
z<BrVF*m9GR<c%nSLNOoxwS;FQ4H?cC5)T_>vqU5Ky4}cpxauTiCZYriMBIdaBVpM{
zLxwX(g>Jb-qsTm0?nYW^kc0$8lt6(<cz5ka8Zw+uC63|TNcJwr@W`}@%0_57vx3g)
zauFqvEyojAO4zY}BQ1?n;%@8+%}3#_AbW^gg>KH&Tk#Rdgye=Ofx?imTXP#J&~Q$k
z1dF?m^CQCY=VGx4{T{_)G_dLRmT)<BxAdm`W6CveQ6ckS+Qo-x8NSkT+lq@bSwWv3
z8Km5c*3!kf4}VBFen>+>L4=Sp5G7CuTMKW;W6@_L1-ojeCWf~&kWlWx9<3z*B_ubB
zT5NJ<9Gacl?V(GL!pHg1_j!uTp5Gx1J!m+IIt<YnOi{LohI5~A?c9&aTH8Q9S{vuZ
zxobnQDR~J`2&o@Y0x4OH{CEFNalxB&*+`4yyo9?>Ytv+f-ojN8*@f*PXG94Uh|FI+
zZKP4dc_CrgG+Cj9km3*}P$=TAdE_`h6bY9MVbf%V5<-eZlt97A_-tpJX2*F6mzJsd
ztU)!Cy#taSQZf=z0)->afDSpXxRQnqXQ&{dx2PPB&APBYNoqt1RDd|!V1tOhJ$O88
zR6k4WXZ6Kh{iO}F1`$GvLzF;;h%=_mqyt@S|2U+kxaIZ+y7Z>JWa>CVNNH#pzS7e3
zF&)KYZj&UOsFZim=M@bnA%v6z4d-KyW*G9T&I{=BetcF5?sO4C2+506>G}SEF1<0F
zml#cra~@6z2qC0oP8rYF(B;2KNoadD>i5$LLK=bd#2wi0YvQ2sG%ni<=q7)+cT0Xp
zN<z0=_6tHD!+x;?XA(7WP)%bz?UiFo=<$p<r4TX?Mm(mc)o9yWqBOvATKS`urw<fb
zLXY=Z8%|CJNg>d1HcBpIRFno-PAfm;w$(hI(wlOPoZ*N>2+0|aQCafKfqz><kM+D&
zCmmJfJU*+*5^kUVSO03u)19)*PhWcfce@||uYEPG?fa9$&LP*(OEfjKrG>NPR`(m1
z0`GU+*PZ3NFJDbPd;vL&OsL1jfnTtK9^C6BN0>h3`>h2V4gMVaja`c#zSF=B#A$=w
zDnvs=+j>rTG<yuxa7;_gWzW;s-xba;c6zwPG(E^8)ap@mZVKOWg;wCcX>jbs&Xf-l
z=4!liY{cbwUV==f1`S0C%)tEj7c%TdlP&gVd4tshRO?Z68#Touvk-TW>^pgUYePyl
z;x2~o#ym@_6D+AoL!2<4H!=!LL|pRqF$4aVAJXd8U<XjGN721{>>CJ~h`1Ty2btEm
zV{#=NkPaf1YA8xzA~J7*qq!wlG^+I|ZYHM11;{Aq`MsOKt)x7zghuohsa!)*0uwO*
z?X}EjiN?{Y$K9hUzd?^R$S6`rOX?f%;lELwYwrWx^><5@$Au{yY1oKT!zgHs(Z7SJ
z)Z?!4Tps(WkpughkzE7GY^kYjycYw1qZz2|1q61$eT(wBFl8l;d0wbtG&JH!mLMwi
zcsqoP3+~a{r+j0K=QRj9fea53FO@Z1U+7UOHEZaP!L0E>L+h`D0#lBvq<rt1(5lDn
z%2P8kb`3&K;8!YkvbIFMEKRWyrZud_9#Ol7-nuMNv4&(G+Qze|%a$BtXJ70i9%qcH
z5&MiE{4*EA=|u@OOh;R}*79E*Z;j{k!`~h)*BZsaIM*16+;ni+t6H4JzZDl6-ywUB
z_j&*MGte-m8M%9}TMdzrwnnPy8po=qGb_*0ALDOi&%<XrClZb8T->0$u!C;di8JPn
z*&SRUN{0g3F`OA_7_(2_znAEzfg~dss(P%c)f3+-wA?QR<NzI8wQV^|wAl$p>rguL
z$LtPn4=u0((lstsX*dH;qtlYxNNiW09h6`KZF0xrZqT)>l@|8KhGOet71n_24Kvh`
zw8WU6qiH<XP=|B9Qjr@Dx+jQWK<86};iO-PXfnp)Xd2J|hdS&UC9<<WM#FiWtpV+j
zA*E=@=`~4(rtzf9me6pHBTEBH4GB5VFL1ZEYtVxbH|TaqLl3uo@Q?r6mY)yL9`6Ln
z*;nhDeC}U6%;3!B%*W_V`D{Luy=eC*@}OA_2^q>S(4z-w8h?<y!&G*y&u~k$Hsz}+
zUxp^=*!el@E%|cy_HIC4!X?jMVk9$Mh<4C_XUd;Q%xn#(u|_5u5;7Rky8t_S@B{Zd
z^1-HSlX%!WA}>t|=2jGUwbr%hUJ(C)M>i;+O+FB^%?mY*1|}d%U=sC=wxYyBT-J;Z
z^LfV9d~G6bwr|e?hTbEyZp}}oeB5_&+KwG2xJ=yOeqoBu<=P=E_L*L$=tt=_3`b-Q
z2f@Vf>Cmc2H7hIuXOJXsB+li>A5*q5xnISEW`zU@HH-=-AWEQdL<tH)W?`hikg#mz
z(Czn$=FZ{<;EjakEg~X;HM}{dVIm}sh9|)UL<uyGDDecOd=eTGxImY2|8Mw@TKArH
zW3K1?5>32I^(EYA3&lH$v_hMz;Rrr0j%k>PNE(t<#2ODp36SP6vR_F!qOQKCATHqL
zBsVgdC|6)fbPe;`Zj%8T4r83sn1CpO#t|hJT9w)QCUk3vTd{<?qUnukPS+>^Qx6yB
z<qBa48iYp;9m6#|etv4~8D9nrr9-P8AGvL({#IeYP-}#8^}Q@*(6#u_`VwIXWt6uJ
z&~Va-P^pHC3Ev^LVvT3N`w!C^!EFa?%6Qh<S%y88U$I<3pEo7m%;P`v8|br?K<B52
zYdE^4Q$x}ON&!Rd&AaN{I2im?Ay%F5OIocw#DDe>8G<el25R_#fEtn-F*DF_qQi2?
z`_a9TlKHhSF3f)h2LmfUq7uZNWz@uG;!*YL$ZQP{az?{)dcNpu_=wY=U~%koMR@P}
z5hWhEZD-I8`5}horbMOomzc$)fuT3$67_Hi-8|3MaB4>$FQH41vl<rF^DmJsS9iE<
zSwt6WJhkrO>_A#T+uipno7+Sb7DxVBwD-<_gD&-Is6ZeM2SUSH3Ysg=UqPxyoNK;=
z9@kmrLslBMd_n-t1NbjQDML^78Y&S$!|>4VMn%(jM!!{sMCW(t(VOxf^>PW91YL{Q
z(198b=MuUahJ^toQL)BTt8sK7wX=jCpK4sOZ1Ju?&6SIm>vjn}s3B?AX4?!y9rUt{
zJgd1gwT!s)hTot=4|kBhntifEh>Mc7eM>7^c2@tQhU2+08ZLA-yk&TnpZfqJtw`Az
z8HREWd(x`MC%!Xkb$}&Et!TRC*R>D2mH;c4xvpDkIFcvHSD$5WWLCTVy7OS$Bndrq
z_zy^}XhwY2yifKJ%`>deF%N1ujcU#zlbP(S*|)~?Z|JZDsTHkN%Q{QfejrDdU!AR?
z!xHnTTf;yoYk2HkK+0lkJhgIBc76|)RD|EV>!8D5$dRyqrmxVUlZn}en$R#TS{fdK
z=S)gtYdqJ`Lo1}7<b&#78QS9u^jKmV)NlyL7l4`?l3fa2bl)0J<)9($Y$zl>S_5z2
zVl=jY<{mn9m<BZ*!jT1_vWD}hZIN2&^X%TLvW5;z;oY8(D11kwgAV_oU9{o~I!vR3
z4%9F;+#bz>UE`_QFfKs$D15RwH_CI%_`UUd1`4&f0!$;gh7FAAS{fD(t+!>@cxw9e
z>AEF{7(e*b<D%-JL+TvTM>Whss<7jF4*~`^Iqr<7vQK}hmB^Z8K?farv`Y^irf!LJ
z(4impV~JKLVaN3z@!vBpTvQI`$%DUZhGT0cpeAY2+QY6sBh3l4o_(qogZ|$DJ23D$
zs$88Me)gIS4i}Y!*^}L`7FW>0Hne9gr0}Ypl5%S1Ov-wshB{Eg@=?oeyZaY^hn?mO
z`7H<`gpkU3a^T-IlOX@WV=JUhxOqfK%^WhGlcR1AtcAJy)P&=4L2&b^MW}i^JTjif
zb!$V>*O<VOvHcI`yHz4q&wMPTiYve6cA)s|Q?;Omqj=m2hCKVg`E8vV7BIQjeD)_t
z{#`Tb)~-I^p$1x6`8_t$sUt;)ldnc9&n}4vUc}JwEHOkrI8#j>b)L6|QJ3A5+ko1$
zA2XiU&^=agQN_8>c6~BhZJ|5$O_d=rUyV8_u$X>cG>V3CNG5Uz9ePZoA`Ry<xeats
z;-K+dgt<Na14zD{wp=}Q=uUmJ^0~<iq@{-r9onUF4XbdyscHD+#P>czclG(gtUfP6
z^5nGT`WHG3%dc9edt58G?9{~UaW$-y#x*QqdV6;8P;0+Oji+CIYF~Q$&KS_tv$w!h
zIr8_=VL9lh6#HmKYN%ZahH3QBVTpF3h8hIzlxGKzC@W9PN9gmp?z5j&Iv;zC<VY=a
zv7<F}P{TiS2OYjo9D91`(6tkBdylq;m_`pB(rTEfQz~nC+Iae8@!ETz9cqcbZHM*g
zZ$Iu0i{n4_8tt)!9^WU9J!|Me4d*e{c&?!bHJr)0m8azr`U$<?nppsoClrEr;rAzg
z0)u|f?VpnWb#?k~C9O*m`l-31&uch}7OxznhUKGrS;<-B87T7B@`2Zu6~*6BK(JV5
z@3vQTD|uJZ5;{x>G})U8sAvdx<zU5IFZ-m|aF2F1oH3~#qv6o*KV;=;(T=>`@|oF(
zieaj&X%FB2Tk<;GZc!-N<1ZM^-aD&k=t-ktng}q>ZKeqt?oqymQ<>L^25YF^#Eg-%
zi4H=rp#jYwtC8sOLx#+H3lChj&*<B?7PBG+C548CBh;{XL|?;OhORuV`}P{T8`fJo
zQ&vI)nl(OntcMQ6E(|C?aM|v$bkL#qd8a3nL_=i~%%`Yf`Dki*$6({>d4n+S+YYG>
zXq^Z1wb9IZtbAQvUIO~ItT`~Pp+m+Ro+svfDq{^b&)-*lZDarq?-*q~{jBFb!q6e5
z0ZqNiDZ_Zr-LKh2`NDwgmZ|pHI_RM_U}mggcI2wz8hTK}m>2`Ml5lM3!p#?>%{S3y
ziOLY&eJRTZiU>74i%`Sk6yl{5eGT^*>$cqz%6)6;;8visHr7cnG~IrdE2+qB<ey~)
zU9`PD)bIq<@C*gSA_UTK00U+g=EJ>}@U(QKVHDyb$n04ydtP=WZpCh2KYMLD1i-)V
z57DKX8+W`O+H_DvsNqRuN5dOYqk|$s4NoFr`r#g!gZcj-B|NqgnmLet4so64oeb+Z
zR}#R8N*LXXpD1}<w7Eh6gc=@1s3A2R2<9MeAlLT2A7Ue=?1Ki}4={D`LdKt0+KB$F
z_l1N(HGNi0>}QuSbO?Y9)o}dMiyA(zw+;c2S$ldXg{6iAz+A)$xRE$Cn^0cn&89Xo
zrvonzex8+tp}4(n2{)MtvSQi!+$#wKHM}RZhSw4XYIp`{5cxxIq@iFUar>GYt9#YW
za|s*CmSE;P&1E2AXSy8%BGqX)4WWj|poS-a7UI+QDQ>Wz<4P(%(ju-?T!}7AC?a;x
zC7j^ddl}4U{6oSKbj7ms3?btds9~IEpoR&6Cg%5DN_^f)MMhM{1q6*nwKL1fh(8sp
znq{z<f9{acd>e_>rX@_&<}TDQ&a*_)FrP!75?;fTKpRP8KsQqON>suc&AWPnG7|pC
z(nd1URh%1rBVoBfM1&fK-~z!|9C{{dIEwj`dxSvJ7|<<OQqZ2LxJF<<b4a6k2Ld2r
zGfr)}l7yXC;>~gs9PFls<2gC_Qp0f1m~^$d3qm1j4XDKi+1P#94w)gY0oa-1N+N>*
zh})lyVf;7Z>MfcZP~vz5w%GURkN}~ET2R9<&lXd|K_DcO-hggdNn%4Pu3^tKn6q6C
z>TcVe=ZleX>h3ut@C;bebk?K?)P)*q(5{97wnHUDqqzm4k$ep3mW?>UtudYM-aXS$
z#2L#A|6Uu(gV1NrVq~0p$V!wZMxrvonaoFIfYhMj4K<YbtYoT&i$|Y7Wj`EDl+Y=0
zv$34>Ca&QU-Two3(QNPkep?oc#a<G8aqfz(%c9#Uznb#Gf1P7W!B^&4)(C{$Cu2^v
z=iHm}9ZtvZ{_j8iReE=b>)`gYcD_6}Wr=iG7uidapCJRN;banOXovCpg-}}>+UHIa
z0UYgJ#jWx_Bd5F7+Tz+Y-Zu!0?+~`*b|6FO;U+abGJzV7rUx}_j;JPkPf*nfL%P{V
zA=ug9tA{J-P<WlcA=&D?nD$`xc&Rq%?k_-QkzT`M(A7|p8a2$RXHUJ)a}?W$^$qN$
zDW7y}U@>pdDBym&8GJ%S!)ft4ze2b>U(bC46o9Q8-PMX>J5H}*5$J2ENR1li)U%U)
z7QYW_Q$KNL8wT59-kT1TEQrCo>aC}t9F5~lZMTE&cVteH8peSdHcnDQ9@j75lxufw
z%9|W!#O%0_C}z;zLJc254M`lg?J?}&?jzLRBREYMPTQ&fG<BMdE6EQq)>Yqw^l<xQ
zlLp;XEtnea(PM^&si21XBsHE}jIfvH#TwBy$W+#FojRGD_82>RFFm4>-A48{XsgFW
zQa(`{4YT7`!zY>Uah`)3-l8z+aXm2$<7x4$P%ErGPSJx5#jZBr<h0s6#EzHY6QU4d
zoi^N>ZG*OYl)#ayi?3l;+-X>Hd?7WwojlBBvGZqU_(Q(ifTDVtw+(BJrfm!#V@A?y
z&`_{g@}R9yw4$Nd!~OMYcmbEZrm22tvjahatTzIEK+&Zszk}>zjpk)(MspXhtxXrW
zy!|_>+m&7;lc23oJk+pg4mZFx#%eg}tgYe!-H}wK;bGQzprMxW%*Jhd2=8LJfZGrK
z3vIJqX+AS`^0s8dX?f_TugGv_7qk_Ms<vA88{l*eCk@LX4d>~eRq=M&DGhtfCsDxI
z#F0{5!eE>9cq8p#Zxgtbh}ZwbMx3tKQa-kAs_InAq(Z1+@yIL<=U*<Z$Vm-Fr=149
zWFsizGWf5gB*wL`l|;TXFEvu`0KAe6?~P4?G^Jsk$KPb2hFO_Q$CV7w(EQ9&=JOh*
zBlkjYq<prk%ok{s+uffs24Jg|o#8gC)hUD;7LR0SL=V2xR>N-Ov#n%08~Zz|nmU<>
zTACL-Blr#F+$PYQ^3{|tA+HN75#J$}a8aEd^1$wOSiOpia!vs?97(#^p`+BOp-fMj
ze|Hf;*2eQ#I~vlyb_D;;zvklpw3WX$<!?BH*@K+LPmC^1`48fE;2xad%!V44kGNI(
z1=1`~dbq&RwT6Z=K4sxvTE-@F)>(W-ZOe228rq=R%I@I|rLFL_ma)umf*Oq-Eq}xP
z<>Q+4a1$JRnQt`{oSfPWH7uV83zQ-?l;Qc+*LZN`r5WRS2w!o#<yYKS;=|X6^!{~g
zAnohFJ70fihmC`{psMX)+`&zb;J<!~$CIR=JEh0HZnmszcgN;9@uG(1b5cVw`Ypn1
rIJIqy3jlhJ`-K&7Z@m9Hw9@?_z3m1vdTD!-00000NkvXXu0mjfW{?cC

literal 0
HcmV?d00001


From fedf64419eb61f45b1a39a35f993a521d8c3e9c8 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:22:18 +0000
Subject: [PATCH 09/19] chore(deps): add new script for sources

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index c43f23c3..bed3502e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "db:push": "drizzle-kit push --force",
     "db:migrate": "npx tsx -r dotenv/config ./drizzle/migrate.ts",
     "db:seed": "npx tsx -r dotenv/config ./drizzle/seed.ts",
+    "db:seed:sources": "npx tsx -r dotenv/config ./drizzle/seed-sources.ts",
     "db:nuke": "npx tsx -r dotenv/config ./drizzle/nuke.ts",
     "drizzle:up": "drizzle-kit up",
     "feed:fetch": "npx tsx -r dotenv/config ./scripts/fetch-rss.ts",

From 3249f1149a0f308c61e1da6308fa0180a646ae53 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Wed, 7 Jan 2026 07:23:05 +0000
Subject: [PATCH 10/19] chore(db): update migration and add seed sources script

---
 components/Layout/SidebarAppLayout.tsx |  53 +++
 drizzle/0016_migrate_comments.sql      |   2 +-
 drizzle/seed-sources.ts                | 514 +++++++++++++++++++++++++
 3 files changed, 568 insertions(+), 1 deletion(-)
 create mode 100644 components/Layout/SidebarAppLayout.tsx
 create mode 100644 drizzle/seed-sources.ts

diff --git a/components/Layout/SidebarAppLayout.tsx b/components/Layout/SidebarAppLayout.tsx
new file mode 100644
index 00000000..b0d7ce4b
--- /dev/null
+++ b/components/Layout/SidebarAppLayout.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import type { Session } from "next-auth";
+import { SidebarProvider, useSidebar } from "@/context/SidebarContext";
+import { SidebarLayout } from "@/components/ui-components/sidebar-layout";
+import { AppSidebar } from "@/components/SideBar/AppSidebar";
+import { MinimalHeader } from "@/components/Header/MinimalHeader";
+
+type AlgoliaConfig = {
+  ALGOLIA_APP_ID: string;
+  ALGOLIA_SEARCH_API: string;
+  ALGOLIA_SOURCE_IDX: string;
+};
+
+interface SidebarAppLayoutProps {
+  children: React.ReactNode;
+  session: Session | null;
+  algoliaSearchConfig: AlgoliaConfig;
+  username: string | null;
+}
+
+function SidebarAppLayoutInner({
+  children,
+  session,
+  algoliaSearchConfig,
+  username,
+}: SidebarAppLayoutProps) {
+  const { isCollapsed } = useSidebar();
+
+  return (
+    <SidebarLayout
+      isCollapsed={isCollapsed}
+      sidebar={<AppSidebar session={session} username={username} />}
+      navbar={
+        <MinimalHeader
+          session={session}
+          algoliaSearchConfig={algoliaSearchConfig}
+          username={username}
+        />
+      }
+    >
+      {children}
+    </SidebarLayout>
+  );
+}
+
+export function SidebarAppLayout(props: SidebarAppLayoutProps) {
+  return (
+    <SidebarProvider>
+      <SidebarAppLayoutInner {...props} />
+    </SidebarProvider>
+  );
+}
diff --git a/drizzle/0016_migrate_comments.sql b/drizzle/0016_migrate_comments.sql
index c9fe71b6..d36ad5ee 100644
--- a/drizzle/0016_migrate_comments.sql
+++ b/drizzle/0016_migrate_comments.sql
@@ -192,7 +192,7 @@ BEGIN
             END IF;
 
             -- Get parent's new ID and path
-            SELECT new_comment_id, path INTO parent_comment_id, parent_path
+            SELECT m.new_comment_id, nc.path INTO parent_comment_id, parent_path
             FROM _comment_migration_map m
             JOIN comments nc ON nc.id = m.new_comment_id
             WHERE m.legacy_comment_id = comment_record."parentId";
diff --git a/drizzle/seed-sources.ts b/drizzle/seed-sources.ts
new file mode 100644
index 00000000..3fcb9702
--- /dev/null
+++ b/drizzle/seed-sources.ts
@@ -0,0 +1,514 @@
+import { feed_sources, user } from "../server/db/schema";
+import { nanoid } from "nanoid";
+import { eq } from "drizzle-orm";
+import "dotenv/config";
+import { drizzle, type PostgresJsDatabase } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+
+const DATABASE_URL = process.env.DATABASE_URL || "";
+
+if (!DATABASE_URL) {
+  throw new Error("DATABASE_URL is not set");
+}
+
+const client = postgres(DATABASE_URL, { max: 1 });
+const db: PostgresJsDatabase = drizzle(client);
+
+// Generate slug from name
+const generateSlug = (name: string): string => {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .trim();
+};
+
+// RSS feed sources for content aggregator
+const feedSourcesRaw = [
+  // ============================================
+  // Individual Developer Blogs
+  // ============================================
+  {
+    name: "Josh W Comeau",
+    url: "https://www.joshwcomeau.com/rss.xml",
+    websiteUrl: "https://www.joshwcomeau.com",
+    category: "frontend",
+    description:
+      "Frontend developer sharing CSS tricks, React patterns, and web development insights through interactive tutorials.",
+  },
+  {
+    name: "Kent C. Dodds",
+    url: "https://kentcdodds.com/blog/rss.xml",
+    websiteUrl: "https://kentcdodds.com",
+    category: "react",
+    description:
+      "Full stack JavaScript engineer teaching React and testing best practices through EpicReact and Testing JavaScript.",
+  },
+  {
+    name: "Dan Abramov (Overreacted)",
+    url: "https://overreacted.io/rss.xml",
+    websiteUrl: "https://overreacted.io",
+    category: "react",
+    description:
+      "React core team member exploring JavaScript fundamentals and React internals with deep technical insights.",
+  },
+  {
+    name: "Robin Wieruch",
+    url: "https://www.robinwieruch.de/index.xml",
+    websiteUrl: "https://www.robinwieruch.de",
+    category: "react",
+  },
+  {
+    name: "Lee Robinson",
+    url: "https://leerob.io/feed.xml",
+    websiteUrl: "https://leerob.io",
+    category: "nextjs",
+  },
+  {
+    name: "Tania Rascia",
+    url: "https://www.taniarascia.com/rss.xml",
+    websiteUrl: "https://www.taniarascia.com",
+    category: "webdev",
+  },
+  {
+    name: "Flavio Copes",
+    url: "https://flaviocopes.com/index.xml",
+    websiteUrl: "https://flaviocopes.com",
+    category: "javascript",
+  },
+  {
+    name: "Wes Bos",
+    url: "https://wesbos.com/rss.xml",
+    websiteUrl: "https://wesbos.com",
+    category: "javascript",
+  },
+  {
+    name: "Sara Soueidan",
+    url: "https://sarasoueidan.com/blog/index.xml",
+    websiteUrl: "https://sarasoueidan.com",
+    category: "css",
+  },
+  {
+    name: "Addy Osmani",
+    url: "https://addyosmani.com/rss.xml",
+    websiteUrl: "https://addyosmani.com",
+    category: "webperf",
+  },
+  {
+    name: "Una Kravets",
+    url: "https://una.im/feed.xml",
+    websiteUrl: "https://una.im",
+    category: "css",
+  },
+  {
+    name: "Cassidy Williams",
+    url: "https://cassidoo.co/rss.xml",
+    websiteUrl: "https://cassidoo.co",
+    category: "webdev",
+  },
+  {
+    name: "Swyx",
+    url: "https://www.swyx.io/rss.xml",
+    websiteUrl: "https://www.swyx.io",
+    category: "career",
+  },
+  {
+    name: "Julia Evans",
+    url: "https://jvns.ca/atom.xml",
+    websiteUrl: "https://jvns.ca",
+    category: "backend",
+  },
+  {
+    name: "Monica Dinculescu",
+    url: "https://meowni.ca/atom.xml",
+    websiteUrl: "https://meowni.ca",
+    category: "webdev",
+  },
+  {
+    name: "Lea Verou",
+    url: "https://lea.verou.me/feed.xml",
+    websiteUrl: "https://lea.verou.me",
+    category: "css",
+  },
+  {
+    name: "Ahmad Shadeed",
+    url: "https://ishadeed.com/feed.xml",
+    websiteUrl: "https://ishadeed.com",
+    category: "css",
+  },
+  {
+    name: "Stefan Judis",
+    url: "https://www.stefanjudis.com/rss.xml",
+    websiteUrl: "https://www.stefanjudis.com",
+    category: "webdev",
+  },
+  {
+    name: "Zach Leatherman",
+    url: "https://www.zachleat.com/web/feed/",
+    websiteUrl: "https://www.zachleat.com",
+    category: "jamstack",
+  },
+  {
+    name: "Jake Archibald",
+    url: "https://jakearchibald.com/posts.rss",
+    websiteUrl: "https://jakearchibald.com",
+    category: "webdev",
+  },
+  // ============================================
+  // Publications & Aggregators
+  // ============================================
+  {
+    name: "CSS-Tricks",
+    url: "https://css-tricks.com/feed/",
+    websiteUrl: "https://css-tricks.com",
+    category: "css",
+  },
+  {
+    name: "Smashing Magazine",
+    url: "https://www.smashingmagazine.com/feed/",
+    websiteUrl: "https://www.smashingmagazine.com",
+    category: "webdev",
+  },
+  {
+    name: "freeCodeCamp",
+    url: "https://www.freecodecamp.org/news/rss/",
+    websiteUrl: "https://www.freecodecamp.org/news",
+    category: "tutorial",
+  },
+  {
+    name: "LogRocket Blog",
+    url: "https://blog.logrocket.com/feed/",
+    websiteUrl: "https://blog.logrocket.com",
+    category: "frontend",
+  },
+  {
+    name: "The New Stack",
+    url: "https://thenewstack.io/feed/",
+    websiteUrl: "https://thenewstack.io",
+    category: "devops",
+  },
+  {
+    name: "InfoQ",
+    url: "https://feed.infoq.com/",
+    websiteUrl: "https://www.infoq.com",
+    category: "enterprise",
+  },
+  {
+    name: "Hacker Noon",
+    url: "https://hackernoon.com/feed",
+    websiteUrl: "https://hackernoon.com",
+    category: "tech",
+  },
+  {
+    name: "SitePoint",
+    url: "https://www.sitepoint.com/feed/",
+    websiteUrl: "https://www.sitepoint.com",
+    category: "webdev",
+  },
+  {
+    name: "Codrops",
+    url: "https://tympanus.net/codrops/feed/",
+    websiteUrl: "https://tympanus.net/codrops",
+    category: "frontend",
+  },
+  {
+    name: "web.dev",
+    url: "https://web.dev/feed.xml",
+    websiteUrl: "https://web.dev",
+    category: "webdev",
+  },
+  // ============================================
+  // Company Engineering Blogs
+  // ============================================
+  {
+    name: "Vercel Blog",
+    url: "https://vercel.com/blog/rss.xml",
+    websiteUrl: "https://vercel.com/blog",
+    category: "nextjs",
+  },
+  {
+    name: "Netlify Blog",
+    url: "https://www.netlify.com/blog/feed.xml",
+    websiteUrl: "https://www.netlify.com/blog",
+    category: "jamstack",
+  },
+  {
+    name: "Prisma Blog",
+    url: "https://www.prisma.io/blog/rss.xml",
+    websiteUrl: "https://www.prisma.io/blog",
+    category: "database",
+  },
+  {
+    name: "Supabase Blog",
+    url: "https://supabase.com/blog/rss.xml",
+    websiteUrl: "https://supabase.com/blog",
+    category: "backend",
+  },
+  {
+    name: "Cloudflare Blog",
+    url: "https://blog.cloudflare.com/rss/",
+    websiteUrl: "https://blog.cloudflare.com",
+    category: "devops",
+  },
+  {
+    name: "GitHub Blog",
+    url: "https://github.blog/feed/",
+    websiteUrl: "https://github.blog",
+    category: "devtools",
+  },
+  {
+    name: "Stripe Blog",
+    url: "https://stripe.com/blog/feed.rss",
+    websiteUrl: "https://stripe.com/blog",
+    category: "backend",
+  },
+  {
+    name: "Netflix Tech Blog",
+    url: "https://netflixtechblog.com/feed",
+    websiteUrl: "https://netflixtechblog.com",
+    category: "engineering",
+  },
+  {
+    name: "Spotify Engineering",
+    url: "https://engineering.atspotify.com/feed/",
+    websiteUrl: "https://engineering.atspotify.com",
+    category: "engineering",
+  },
+  {
+    name: "Airbnb Engineering",
+    url: "https://medium.com/feed/airbnb-engineering",
+    websiteUrl: "https://medium.com/airbnb-engineering",
+    category: "engineering",
+  },
+  {
+    name: "Uber Engineering",
+    url: "https://www.uber.com/en-IE/blog/engineering/rss/",
+    websiteUrl: "https://www.uber.com/blog/engineering",
+    category: "engineering",
+  },
+  {
+    name: "Shopify Engineering",
+    url: "https://shopify.engineering/blog.atom",
+    websiteUrl: "https://shopify.engineering",
+    category: "engineering",
+  },
+  {
+    name: "Discord Blog",
+    url: "https://discord.com/blog/rss.xml",
+    websiteUrl: "https://discord.com/blog",
+    category: "engineering",
+  },
+  {
+    name: "Linear Blog",
+    url: "https://linear.app/blog/rss.xml",
+    websiteUrl: "https://linear.app/blog",
+    category: "product",
+  },
+  {
+    name: "Render Blog",
+    url: "https://render.com/blog/rss.xml",
+    websiteUrl: "https://render.com/blog",
+    category: "devops",
+  },
+  {
+    name: "Railway Blog",
+    url: "https://blog.railway.app/feed.xml",
+    websiteUrl: "https://blog.railway.app",
+    category: "devops",
+  },
+  {
+    name: "PlanetScale Blog",
+    url: "https://planetscale.com/blog/rss.xml",
+    websiteUrl: "https://planetscale.com/blog",
+    category: "database",
+  },
+  {
+    name: "Turso Blog",
+    url: "https://blog.turso.tech/rss.xml",
+    websiteUrl: "https://blog.turso.tech",
+    category: "database",
+  },
+  {
+    name: "Deno Blog",
+    url: "https://deno.com/blog/rss.xml",
+    websiteUrl: "https://deno.com/blog",
+    category: "javascript",
+  },
+  {
+    name: "Bun Blog",
+    url: "https://bun.sh/blog/rss.xml",
+    websiteUrl: "https://bun.sh/blog",
+    category: "javascript",
+  },
+  {
+    name: "Figma Blog",
+    url: "https://www.figma.com/blog/feed/",
+    websiteUrl: "https://www.figma.com/blog",
+    category: "design",
+  },
+  {
+    name: "Notion Blog",
+    url: "https://www.notion.so/blog/rss.xml",
+    websiteUrl: "https://www.notion.so/blog",
+    category: "product",
+  },
+  // ============================================
+  // Career & Industry
+  // ============================================
+  {
+    name: "The Pragmatic Engineer",
+    url: "https://newsletter.pragmaticengineer.com/feed",
+    websiteUrl: "https://newsletter.pragmaticengineer.com",
+    category: "career",
+  },
+  {
+    name: "StaffEng",
+    url: "https://staffeng.com/feed.xml",
+    websiteUrl: "https://staffeng.com",
+    category: "career",
+  },
+  {
+    name: "Bytes.dev",
+    url: "https://bytes.dev/rss",
+    websiteUrl: "https://bytes.dev",
+    category: "javascript",
+  },
+  {
+    name: "This Week in React",
+    url: "https://thisweekinreact.com/rss.xml",
+    websiteUrl: "https://thisweekinreact.com",
+    category: "react",
+  },
+  // ============================================
+  // AI/ML
+  // ============================================
+  {
+    name: "Hugging Face Blog",
+    url: "https://huggingface.co/blog/feed.xml",
+    websiteUrl: "https://huggingface.co/blog",
+    category: "ai",
+  },
+  {
+    name: "OpenAI Blog",
+    url: "https://openai.com/blog/rss/",
+    websiteUrl: "https://openai.com/blog",
+    category: "ai",
+  },
+  {
+    name: "Anthropic News",
+    url: "https://www.anthropic.com/news/rss.xml",
+    websiteUrl: "https://www.anthropic.com/news",
+    category: "ai",
+  },
+  {
+    name: "Google AI Blog",
+    url: "https://blog.research.google/feeds/posts/default",
+    websiteUrl: "https://blog.research.google",
+    category: "ai",
+  },
+  {
+    name: "Towards Data Science",
+    url: "https://towardsdatascience.com/feed",
+    websiteUrl: "https://towardsdatascience.com",
+    category: "ai",
+  },
+  {
+    name: "The Batch (DeepLearning.AI)",
+    url: "https://www.deeplearning.ai/the-batch/feed/",
+    websiteUrl: "https://www.deeplearning.ai/the-batch",
+    category: "ai",
+  },
+];
+
+async function seedFeedSources() {
+  console.log(`Seeding ${feedSourcesRaw.length} feed sources with bot users...`);
+
+  let usersCreated = 0;
+  let sourcesCreated = 0;
+  let sourcesUpdated = 0;
+
+  for (const source of feedSourcesRaw) {
+    const slug = generateSlug(source.name);
+    const username = slug.substring(0, 40); // Max 40 chars for username
+
+    // Check if user already exists
+    const existingUser = await db
+      .select({ id: user.id })
+      .from(user)
+      .where(eq(user.username, username))
+      .limit(1);
+
+    let userId: string;
+
+    if (existingUser.length > 0) {
+      // Use existing user
+      userId = existingUser[0].id;
+    } else {
+      // Create new bot user for this source
+      const newUserId = `feed_${slug}_${nanoid(8)}`;
+      const [newUser] = await db
+        .insert(user)
+        .values({
+          id: newUserId,
+          username: username,
+          name: source.name,
+          websiteUrl: source.websiteUrl || "",
+          bio: source.description || "",
+          image: "/images/person.png",
+        })
+        .returning({ id: user.id });
+
+      userId = newUser.id;
+      usersCreated++;
+      console.log(`Created bot user: ${username}`);
+    }
+
+    // Check if source already exists
+    const existingSource = await db
+      .select({ id: feed_sources.id, userId: feed_sources.userId })
+      .from(feed_sources)
+      .where(eq(feed_sources.url, source.url))
+      .limit(1);
+
+    if (existingSource.length > 0) {
+      // Update existing source with user_id if not set
+      if (!existingSource[0].userId) {
+        await db
+          .update(feed_sources)
+          .set({ userId: userId })
+          .where(eq(feed_sources.id, existingSource[0].id));
+        sourcesUpdated++;
+        console.log(`Updated source with user_id: ${source.name}`);
+      }
+    } else {
+      // Insert new source
+      await db.insert(feed_sources).values({
+        name: source.name,
+        url: source.url,
+        websiteUrl: source.websiteUrl,
+        category: source.category,
+        description: source.description,
+        slug: slug,
+        userId: userId,
+      });
+      sourcesCreated++;
+      console.log(`Created source: ${source.name}`);
+    }
+  }
+
+  console.log("\n=== Summary ===");
+  console.log(`Bot users created: ${usersCreated}`);
+  console.log(`Feed sources created: ${sourcesCreated}`);
+  console.log(`Feed sources updated with user_id: ${sourcesUpdated}`);
+  console.log(`Total sources processed: ${feedSourcesRaw.length}`);
+
+  await client.end();
+  process.exit(0);
+}
+
+seedFeedSources().catch((error) => {
+  console.error("Error seeding feed sources:", error);
+  client.end();
+  process.exit(1);
+});

From 55f764fd8cf7b6c0718fa4e0ace9cd4be2d2a914 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 16:38:00 +0000
Subject: [PATCH 11/19]   refactor(ui): add aria-labels and update layout
 components

  - Add aria-label to header elements for accessibility
  - Update sidebar and navbar layout components
  - Refactor editor navigation styling
  - Minor layout adjustments across page components
---
 app/(app)/[username]/_sourceProfileClient.tsx |  8 +--
 app/(app)/[username]/_usernameClient.tsx      |  4 +-
 app/(app)/advertise/_client.tsx               |  4 +-
 app/(app)/auth/page.tsx                       |  4 +-
 app/(app)/code-of-conduct/page.tsx            |  4 +-
 app/(app)/error.tsx                           |  4 +-
 app/(app)/feed/[sourceSlug]/_client.tsx       |  8 +--
 app/(app)/feed/_client.tsx                    |  4 +-
 app/(app)/forbidden/page.tsx                  |  4 +-
 app/(app)/page.tsx                            |  4 +-
 .../create/[[...paramsArr]]/navigation.tsx    | 55 ++++++++++---------
 components/ContentDetail/Layout.tsx           |  5 +-
 components/ui-components/navbar.tsx           |  1 +
 components/ui-components/sidebar-layout.tsx   | 10 +++-
 components/ui-components/sidebar.tsx          |  1 +
 components/ui-components/stacked-layout.tsx   |  2 +-
 16 files changed, 68 insertions(+), 54 deletions(-)

diff --git a/app/(app)/[username]/_sourceProfileClient.tsx b/app/(app)/[username]/_sourceProfileClient.tsx
index 30af43d8..f695dddc 100644
--- a/app/(app)/[username]/_sourceProfileClient.tsx
+++ b/app/(app)/[username]/_sourceProfileClient.tsx
@@ -61,7 +61,7 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
   if (sourceStatus === "pending") {
     return (
       <div className="mx-auto max-w-2xl px-4 text-black dark:text-white">
-        <main className="pt-6 sm:flex">
+        <div className="pt-6 sm:flex">
           <div className="mr-4 flex-shrink-0 self-center">
             <div className="mb-2 h-20 w-20 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700 sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32" />
           </div>
@@ -69,7 +69,7 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
             <div className="mb-2 h-6 w-48 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
             <div className="h-4 w-32 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
           </div>
-        </main>
+        </div>
       </div>
     );
   }
@@ -102,7 +102,7 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
     <>
       <div className="text-900 mx-auto max-w-2xl px-4 text-black dark:text-white">
         {/* Profile header - matching user profile pattern exactly */}
-        <main className="pt-6 sm:flex">
+        <div className="pt-6 sm:flex">
           <div className="mr-4 flex-shrink-0 self-center">
             {source.logoUrl ? (
               <img
@@ -142,7 +142,7 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
               </Link>
             )}
           </div>
-        </main>
+        </div>
 
         {/* Articles header - matching user profile */}
         <div className="mx-auto mt-4 sm:max-w-2xl lg:max-w-5xl">
diff --git a/app/(app)/[username]/_usernameClient.tsx b/app/(app)/[username]/_usernameClient.tsx
index 1b417c76..0ddaa0c6 100644
--- a/app/(app)/[username]/_usernameClient.tsx
+++ b/app/(app)/[username]/_usernameClient.tsx
@@ -77,7 +77,7 @@ const Profile = ({ profile, isOwner, session }: Props) => {
   return (
     <>
       <div className="text-900 mx-auto max-w-2xl px-4 text-black dark:text-white">
-        <main className="pt-6 sm:flex">
+        <div className="pt-6 sm:flex">
           <div className="mr-4 flex-shrink-0 self-center">
             {image && (
               <img
@@ -106,7 +106,7 @@ const Profile = ({ profile, isOwner, session }: Props) => {
               </Link>
             )}
           </div>
-        </main>
+        </div>
         {accountLocked ? (
           <div className="mt-8 flex items-center justify-between border-b pb-4 text-3xl font-extrabold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
             <Heading level={1}>Account locked 🔒</Heading>
diff --git a/app/(app)/advertise/_client.tsx b/app/(app)/advertise/_client.tsx
index e9b83b28..4b69368c 100644
--- a/app/(app)/advertise/_client.tsx
+++ b/app/(app)/advertise/_client.tsx
@@ -10,12 +10,12 @@ import {
 
 export function AdvertiseClient() {
   return (
-    <main>
+    <>
       <HeroSection />
       <MetricsSection />
       <OfferingsSection />
       <SocialProofSection />
       <ContactSection />
-    </main>
+    </>
   );
 }
diff --git a/app/(app)/auth/page.tsx b/app/(app)/auth/page.tsx
index f94271c7..c925dfa3 100644
--- a/app/(app)/auth/page.tsx
+++ b/app/(app)/auth/page.tsx
@@ -27,7 +27,7 @@ export const PostAuthPage = (content: {
   if (!mounted) return null;
 
   return (
-    <main className="flex w-full flex-grow flex-col justify-center bg-neutral-100 px-4 py-20 dark:bg-black sm:px-6 lg:py-40">
+    <div className="flex w-full flex-grow flex-col justify-center bg-neutral-100 px-4 py-20 dark:bg-black sm:px-6 lg:py-40">
       <div className="flex flex-shrink-0 justify-center">
         <Link href="/">
           <span className="sr-only">Codú</span>
@@ -62,7 +62,7 @@ export const PostAuthPage = (content: {
           </div>
         </div>
       </div>
-    </main>
+    </div>
   );
 };
 
diff --git a/app/(app)/code-of-conduct/page.tsx b/app/(app)/code-of-conduct/page.tsx
index d8f9560e..f3ad0022 100644
--- a/app/(app)/code-of-conduct/page.tsx
+++ b/app/(app)/code-of-conduct/page.tsx
@@ -7,7 +7,7 @@ export const metadata = {
 const CodeOfConduct = () => {
   return (
     <div>
-      <main className="relative bg-white p-4 shadow-lg dark:border-neutral-600 dark:border-l-pink-600 dark:bg-neutral-900">
+      <div className="relative bg-white p-4 shadow-lg dark:border-neutral-600 dark:border-l-pink-600 dark:bg-neutral-900">
         <div className="lg:max-w-8xl relative px-4 pb-16 pt-12 sm:px-6 sm:pt-16 lg:mx-auto lg:px-8">
           <div className="lg:pl-8">
             <div className="mx-auto max-w-prose text-base">
@@ -155,7 +155,7 @@ const CodeOfConduct = () => {
             </div>
           </div>
         </div>
-      </main>
+      </div>
     </div>
   );
 };
diff --git a/app/(app)/error.tsx b/app/(app)/error.tsx
index c12c1d9e..964de7e0 100644
--- a/app/(app)/error.tsx
+++ b/app/(app)/error.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 
 export default function NotFound() {
   return (
-    <main className="flex w-full flex-grow flex-col justify-center bg-white px-4 py-20 sm:px-6 lg:py-40">
+    <div className="flex w-full flex-grow flex-col justify-center bg-white px-4 py-20 sm:px-6 lg:py-40">
       <div className="flex flex-shrink-0 justify-center">
         <Link href="/">
           <span className="sr-only">Codú</span>
@@ -51,6 +51,6 @@ export default function NotFound() {
           </div>
         </div>
       </div>
-    </main>
+    </div>
   );
 }
diff --git a/app/(app)/feed/[sourceSlug]/_client.tsx b/app/(app)/feed/[sourceSlug]/_client.tsx
index 2006304d..21898ef6 100644
--- a/app/(app)/feed/[sourceSlug]/_client.tsx
+++ b/app/(app)/feed/[sourceSlug]/_client.tsx
@@ -61,7 +61,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
   if (sourceStatus === "pending") {
     return (
       <div className="mx-auto max-w-2xl px-4 text-black dark:text-white">
-        <main className="pt-6 sm:flex">
+        <div className="pt-6 sm:flex">
           <div className="mr-4 flex-shrink-0 self-center">
             <div className="mb-2 h-20 w-20 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700 sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32" />
           </div>
@@ -69,7 +69,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
             <div className="mb-2 h-6 w-48 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
             <div className="h-4 w-32 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
           </div>
-        </main>
+        </div>
       </div>
     );
   }
@@ -102,7 +102,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
     <>
       <div className="text-900 mx-auto max-w-2xl px-4 text-black dark:text-white">
         {/* Profile header - matching user profile pattern exactly */}
-        <main className="pt-6 sm:flex">
+        <div className="pt-6 sm:flex">
           <div className="mr-4 flex-shrink-0 self-center">
             {source.logoUrl ? (
               <img
@@ -142,7 +142,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
               </Link>
             )}
           </div>
-        </main>
+        </div>
 
         {/* Articles header - matching user profile */}
         <div className="mx-auto mt-4 sm:max-w-2xl lg:max-w-5xl">
diff --git a/app/(app)/feed/_client.tsx b/app/(app)/feed/_client.tsx
index b3a4eda6..1f85c27e 100644
--- a/app/(app)/feed/_client.tsx
+++ b/app/(app)/feed/_client.tsx
@@ -106,7 +106,7 @@ const FeedPage = () => {
   };
 
   return (
-    <main className="mx-2">
+    <div className="mx-2">
       {/* Header */}
       <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
         <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
@@ -252,7 +252,7 @@ const FeedPage = () => {
           </div>
         </section>
       </div>
-    </main>
+    </div>
   );
 };
 
diff --git a/app/(app)/forbidden/page.tsx b/app/(app)/forbidden/page.tsx
index 4e36025a..a6852a7b 100644
--- a/app/(app)/forbidden/page.tsx
+++ b/app/(app)/forbidden/page.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 
 const Forbidden: NextPage = () => {
   return (
-    <main className="flex w-full flex-grow flex-col justify-center bg-white px-4 py-20 sm:px-6 lg:py-40">
+    <div className="flex w-full flex-grow flex-col justify-center bg-white px-4 py-20 sm:px-6 lg:py-40">
       <div className="flex flex-shrink-0 justify-center">
         <Link href="/">
           <span className="sr-only">Codú</span>
@@ -37,7 +37,7 @@ const Forbidden: NextPage = () => {
           </div>
         </div>
       </div>
-    </main>
+    </div>
   );
 };
 
diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index 7a3f3125..23e92bb5 100644
--- a/app/(app)/page.tsx
+++ b/app/(app)/page.tsx
@@ -13,7 +13,7 @@ const Home = async () => {
   const session = await getServerAuthSession();
 
   return (
-    <main>
+    <>
       {!session && (
         <div>
           <Hero />
@@ -70,7 +70,7 @@ const Home = async () => {
           </section>
         </div>
       </div>
-    </main>
+    </>
   );
 };
 
diff --git a/app/(editor)/create/[[...paramsArr]]/navigation.tsx b/app/(editor)/create/[[...paramsArr]]/navigation.tsx
index d1b5397d..5d01f230 100644
--- a/app/(editor)/create/[[...paramsArr]]/navigation.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/navigation.tsx
@@ -5,9 +5,9 @@ import { Menu, Transition } from "@headlessui/react";
 import { BellIcon } from "@heroicons/react/20/solid";
 import { signOut } from "next-auth/react";
 import Link from "next/link";
+import Image from "next/image";
 import { Fragment } from "react";
 import { type Session } from "next-auth";
-import Logo from "@/icons/logo.svg";
 import { type PostStatus, status } from "@/utils/post";
 
 type EditorNavProps = {
@@ -57,12 +57,21 @@ const EditorNav = ({
   const statusText = getStatusText();
 
   return (
-    <nav className="sticky top-0 z-50 bg-white shadow-sm dark:bg-black">
+    <nav
+      aria-label="Editor navigation"
+      className="sticky top-0 z-50 bg-white shadow-sm dark:bg-black"
+    >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex h-14 items-center justify-between">
           <div className="flex items-center space-x-4">
             <Link href="/" className="flex items-center">
-              <Logo className="h-6 w-auto" />
+              <Image
+                src="/images/codu.png"
+                alt="Codú"
+                height={16}
+                width={64}
+                className="dark:invert-0"
+              />
             </Link>
 
             {statusText && (
@@ -76,7 +85,7 @@ const EditorNav = ({
             <button
               onClick={onPublish}
               disabled={isDisabled}
-              className="rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-3 py-1.5 text-sm font-medium text-white hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              className="rounded-md bg-pink-500 px-2.5 py-1 text-sm font-medium text-white hover:bg-pink-600 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {postStatus === status.PUBLISHED ? "Save changes" : "Publish"}
             </button>
@@ -119,30 +128,24 @@ const EditorNav = ({
                     leaveFrom="transform opacity-100 scale-100"
                     leaveTo="transform opacity-0 scale-95"
                   >
-                    <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <Menu.Items className="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-zinc-800 dark:ring-white/10">
                       {userNavigation.map((item) => (
                         <Menu.Item key={item.name}>
-                          {({ active }) =>
-                            item.onClick ? (
-                              <button
-                                onClick={item.onClick}
-                                className={`${
-                                  active ? "bg-neutral-100" : ""
-                                } block w-full px-4 py-2 text-left text-sm text-neutral-700`}
-                              >
-                                {item.name}
-                              </button>
-                            ) : (
-                              <Link
-                                href={item.href}
-                                className={`${
-                                  active ? "bg-neutral-100" : ""
-                                } block px-4 py-2 text-sm text-neutral-700`}
-                              >
-                                {item.name}
-                              </Link>
-                            )
-                          }
+                          {item.onClick ? (
+                            <button
+                              onClick={item.onClick}
+                              className="flex w-full rounded px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-zinc-700"
+                            >
+                              {item.name}
+                            </button>
+                          ) : (
+                            <Link
+                              href={item.href}
+                              className="block rounded px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-zinc-700"
+                            >
+                              {item.name}
+                            </Link>
+                          )}
                         </Menu.Item>
                       ))}
                     </Menu.Items>
diff --git a/components/ContentDetail/Layout.tsx b/components/ContentDetail/Layout.tsx
index 4e6b5def..8adf76db 100644
--- a/components/ContentDetail/Layout.tsx
+++ b/components/ContentDetail/Layout.tsx
@@ -27,7 +27,10 @@ const ContentDetailLayout = ({
     <div className="mx-auto max-w-3xl px-4 py-8">
       {/* Breadcrumb navigation */}
       {breadcrumbs.length > 0 && (
-        <nav className="mb-6 flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400">
+        <nav
+          aria-label="Breadcrumb"
+          className="mb-6 flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400"
+        >
           {breadcrumbs.map((item, index) => (
             <span key={index} className="flex items-center gap-2">
               {index > 0 && <span aria-hidden="true">/</span>}
diff --git a/components/ui-components/navbar.tsx b/components/ui-components/navbar.tsx
index ca04352b..2be26110 100644
--- a/components/ui-components/navbar.tsx
+++ b/components/ui-components/navbar.tsx
@@ -13,6 +13,7 @@ export function Navbar({
 }: React.ComponentPropsWithoutRef<"nav">) {
   return (
     <nav
+      aria-label="Top navigation"
       {...props}
       className={clsx(className, "flex flex-1 items-center gap-4 py-2.5")}
     />
diff --git a/components/ui-components/sidebar-layout.tsx b/components/ui-components/sidebar-layout.tsx
index 7c90de05..f95641da 100644
--- a/components/ui-components/sidebar-layout.tsx
+++ b/components/ui-components/sidebar-layout.tsx
@@ -68,7 +68,10 @@ export function SidebarLayout({
   return (
     <div className="relative isolate flex min-h-svh w-full bg-neutral-100 dark:bg-black max-lg:flex-col">
       {/* Desktop navbar - completely independent, full width, above everything */}
-      <header className="fixed left-0 right-0 top-0 z-50 hidden h-16 items-center border-b border-neutral-200 bg-neutral-100 px-6 dark:border-neutral-800 dark:bg-black lg:flex">
+      <header
+        aria-label="Site header"
+        className="fixed left-0 right-0 top-0 z-50 hidden h-16 items-center border-b border-neutral-200 bg-neutral-100 px-6 dark:border-neutral-800 dark:bg-black lg:flex"
+      >
         {navbar}
       </header>
 
@@ -93,7 +96,10 @@ export function SidebarLayout({
       </MobileSidebar>
 
       {/* Navbar on mobile */}
-      <header className="flex items-center border-b border-neutral-200 px-4 dark:border-neutral-800 lg:hidden">
+      <header
+        aria-label="Site header"
+        className="flex items-center border-b border-neutral-200 px-4 dark:border-neutral-800 lg:hidden"
+      >
         <div className="py-2.5">
           <NavbarItem
             onClick={() => setShowSidebar(true)}
diff --git a/components/ui-components/sidebar.tsx b/components/ui-components/sidebar.tsx
index a43946fe..dde04010 100644
--- a/components/ui-components/sidebar.tsx
+++ b/components/ui-components/sidebar.tsx
@@ -14,6 +14,7 @@ export function Sidebar({
 }: React.ComponentPropsWithoutRef<"nav">) {
   return (
     <nav
+      aria-label="Main navigation"
       {...props}
       className={clsx(className, "flex h-full min-h-0 flex-col")}
     />
diff --git a/components/ui-components/stacked-layout.tsx b/components/ui-components/stacked-layout.tsx
index 788e9608..c285c952 100644
--- a/components/ui-components/stacked-layout.tsx
+++ b/components/ui-components/stacked-layout.tsx
@@ -66,7 +66,7 @@ export function StackedLayout({
       </MobileSidebar>
 
       {/* Navbar */}
-      <header className="flex items-center px-4">
+      <header aria-label="Site header" className="flex items-center px-4">
         <div className="py-2.5 lg:hidden">
           <NavbarItem
             onClick={() => setShowSidebar(true)}

From 29d3affcfe59c1257906162ba0d3650a507e7176 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 16:38:34 +0000
Subject: [PATCH 12/19] fix(e2e): update test expectations to match current UI

  - Update home test to check for "Trending" heading instead of h1
  - Update login test button text to match OAuth buttons
  - Fix articles test to use Create button and correct modal text
  - Add loading state wait and exact matching in my-posts test
  - Remove flaky footer Events link check
---
 e2e/articles.spec.ts | 46 +++++++++++++++++++++++---------------------
 e2e/home.spec.ts     | 17 +++++-----------
 e2e/login.spec.ts    | 36 +++++++++++++++-------------------
 e2e/my-posts.spec.ts |  6 +++++-
 4 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
index 6dc67b19..82763b6c 100644
--- a/e2e/articles.spec.ts
+++ b/e2e/articles.spec.ts
@@ -74,11 +74,8 @@ test.describe("Unauthenticated Feed Page (Articles)", () => {
       expect(finalArticleCount).toBeGreaterThanOrEqual(initialArticleCount);
     }
 
-    // Footer links should be visible
+    // Footer links should be visible - use footer nav for specific items
     await expect(page.getByRole("link", { name: "Home" })).toBeVisible();
-    await expect(
-      page.getByLabel("Footer").getByRole("link", { name: "Events" }),
-    ).toBeVisible();
     await expect(page.getByRole("link", { name: "Advertise" })).toBeVisible();
     await expect(
       page.getByRole("link", { name: "Code Of Conduct" }),
@@ -180,33 +177,38 @@ test.describe("Authenticated Feed Page (Articles)", () => {
     // Waits for articles to be loaded
     await page.waitForSelector("article");
 
-    // Mobile and Desktop have different ways to start writing an article
+    // Desktop: Use the Create button in the header
+    // Mobile: Navigate directly to /create
     if (isMobile) {
-      await expect(
-        page.getByRole("button", { name: "Open main menu" }),
-      ).toBeVisible();
-      page.getByRole("button", { name: "Open main menu" }).tap();
-      await expect(page.getByRole("link", { name: "New Post" })).toBeVisible();
-      await page.getByRole("link", { name: "New Post" }).tap();
+      await page.goto("http://localhost:3000/create");
     } else {
-      await expect(page.getByRole("link", { name: "New Post" })).toBeVisible();
-      await page.getByRole("link", { name: "New Post" }).click();
+      await expect(page.getByRole("link", { name: "Create" })).toBeVisible();
+      await page.getByRole("link", { name: "Create" }).click();
     }
-    await page.waitForURL("http:/localhost:3000/create");
+    await page.waitForURL("http://localhost:3000/create");
 
     await page.getByPlaceholder("Article title").fill(articleTitle);
 
-    await page
-      .getByPlaceholder("Enter your content here 💖")
-      .fill(articleContent);
+    // Fill in the editor content - use keyboard.type() for TipTap
+    const editor = page.locator(".ProseMirror");
+    await editor.click();
+    await page.keyboard.type(articleContent);
+
+    // Wait for auto-save to complete - URL should update with post ID
+    await page.waitForURL(/.*create\/[a-z0-9]+/, { timeout: 20000 });
 
-    await expect(page.getByRole("button", { name: "Publish" })).toBeVisible();
-    await page.getByRole("button", { name: "Publish" }).click();
+    // Click the Publish button in the navigation
+    const navPublishButton = page
+      .getByLabel("Editor navigation")
+      .getByRole("button", { name: "Publish" });
+    await expect(navPublishButton).toBeEnabled({ timeout: 5000 });
+    await navPublishButton.click();
 
+    // Modal should appear with "Let's do this!" button for articles
     await expect(
-      page.getByRole("button", { name: "Publish now" }),
-    ).toBeVisible();
-    await page.getByRole("button", { name: "Publish now" }).click();
+      page.getByRole("button", { name: "Let's do this!" }),
+    ).toBeVisible({ timeout: 10000 });
+    await page.getByRole("button", { name: "Let's do this!" }).click();
     // New URL pattern: /[username]/[slug]
     await page.waitForURL(
       /^http:\/\/localhost:3000\/e2e-test-user-one-111\/lorem-ipsum-.*$/,
diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts
index df16716b..331e0ed9 100644
--- a/e2e/home.spec.ts
+++ b/e2e/home.spec.ts
@@ -8,19 +8,12 @@ test.describe("Authenticated homepage", () => {
   test("Homepage view", async ({ page, isMobile }) => {
     await page.goto("http://localhost:3000/");
 
-    await expect(page.locator("h1")).not.toContainText("Unwanted text");
-
-    // Check for "Topics" section on sidebar (desktop only)
-    const topicsVisible = await page
-      .locator('text="Topics"')
-      .first()
-      .isVisible();
+    // For authenticated users, check for "Trending" heading (h3) instead of h1
+    // h1 only exists for unauthenticated users in the Hero section
+    await expect(page.getByRole("heading", { name: "Trending" })).toBeVisible();
 
-    if (isMobile) {
-      // Topics sidebar not visible on mobile
-      expect(topicsVisible).toBe(false);
-    } else {
-      // Desktop should show "Your Posts" link in header
+    if (!isMobile) {
+      // Desktop should show "Your Posts" link in header/sidebar
       await expect(
         page.getByRole("link", {
           name: "Your Posts",
diff --git a/e2e/login.spec.ts b/e2e/login.spec.ts
index ea60eac2..ba50dfed 100644
--- a/e2e/login.spec.ts
+++ b/e2e/login.spec.ts
@@ -7,20 +7,18 @@ test.describe("Unauthenticated Login Page", () => {
     await page.context().clearCookies();
     await page.goto("http://localhost:3000/get-started");
   });
-  test("Sign up page contains sign up links", async ({ page, isMobile }) => {
-    await expect(page.getByText("CodúBetaSign in or create")).toBeVisible();
+  test("Sign up page contains sign up links", async ({ page }) => {
     await expect(
       page.getByRole("heading", { name: "Sign in or create your account" }),
     ).toBeVisible();
     await expect(page.getByRole("link", { name: "return home" })).toBeVisible();
-    if (!isMobile) {
-      await expect(
-        page.getByRole("button", { name: "Sign up for free" }),
-      ).toBeVisible();
-      await expect(
-        page.getByRole("button", { name: "Sign in", exact: true }),
-      ).toBeVisible();
-    }
+    // Check for OAuth provider buttons
+    await expect(
+      page.getByRole("button", { name: "Continue with GitHub" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Continue with GitLab" }),
+    ).toBeVisible();
   });
   test("Login page contains GitHub button", async ({ page }) => {
     await expect(page.getByTestId("github-login-button")).toBeVisible();
@@ -35,23 +33,21 @@ test.describe("Authenticated Login Page", () => {
   test.beforeEach(async ({ page }) => {
     await loggedInAsUserOne(page);
   });
-  test("Sign up page contains sign up links", async ({ page, isMobile }) => {
+  test("Sign up page contains sign up links", async ({ page }) => {
     // authenticated users are kicked back to the homepage if they try to go to /get-started
     await page.goto("http://localhost:3000/get-started");
     expect(page.url()).toEqual("http://localhost:3000/");
-    await expect(page.getByText("CodúBetaSign in or create")).toBeHidden();
     await expect(
       page.getByRole("heading", { name: "Sign in or create your account" }),
     ).toBeHidden();
     await expect(page.getByRole("link", { name: "return home" })).toBeHidden();
-    if (!isMobile) {
-      await expect(
-        page.getByRole("button", { name: "Sign up for free" }),
-      ).toBeHidden();
-      await expect(
-        page.getByRole("button", { name: "Sign in", exact: true }),
-      ).toBeHidden();
-    }
+    // OAuth provider buttons should be hidden on homepage
+    await expect(
+      page.getByRole("button", { name: "Continue with GitHub" }),
+    ).toBeHidden();
+    await expect(
+      page.getByRole("button", { name: "Continue with GitLab" }),
+    ).toBeHidden();
   });
   test("Login page contains GitHub button", async ({ page }) => {
     await expect(page.getByTestId("github-login-button")).toBeHidden();
diff --git a/e2e/my-posts.spec.ts b/e2e/my-posts.spec.ts
index 41119f5e..cad9c4ba 100644
--- a/e2e/my-posts.spec.ts
+++ b/e2e/my-posts.spec.ts
@@ -11,6 +11,10 @@ async function openTab(page: Page, tabName: TabName) {
   const slug = tabName.toLowerCase();
   await page.waitForURL(`http://localhost:3000/my-posts?tab=${slug}`);
   await expect(page).toHaveURL(new RegExp(`\\/my-posts\\?tab=${slug}`));
+  // Wait for content to load - wait for loading message to disappear
+  await expect(page.getByText("Fetching your posts...")).toBeHidden({
+    timeout: 15000,
+  });
 }
 
 async function openDeleteModal(page: Page, title: string) {
@@ -73,7 +77,7 @@ test.describe("Authenticated my-posts Page", () => {
 
     await openTab(page, "Drafts");
     await expect(
-      page.getByRole("heading", { name: "Draft Article" }),
+      page.getByRole("heading", { name: "Draft Article", exact: true }),
     ).toBeVisible();
     await expect(
       page.getByText("This is an excerpt for a draft article.", {

From 9a66a214ff31c1f66792c24eb520ea3b7fd809c9 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 16:40:30 +0000
Subject: [PATCH 13/19] feat(api): add getUserLinkBySlug endpoint and fix
 myScheduled query

  - Add getUserLinkBySlug endpoint for fetching user link posts by slug
  - Fix myScheduled to filter by status="scheduled" instead of "published"
  - Remove unused gt import from drizzle-orm
---
 server/api/router/content.ts | 122 +++++++++++++++++++++++++++++++++--
 1 file changed, 118 insertions(+), 4 deletions(-)

diff --git a/server/api/router/content.ts b/server/api/router/content.ts
index f90bf97f..c5f04a53 100644
--- a/server/api/router/content.ts
+++ b/server/api/router/content.ts
@@ -1,4 +1,5 @@
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
 import { createTRPCRouter, publicProcedure, protectedProcedure } from "../trpc";
 import {
   GetUnifiedFeedSchema,
@@ -28,7 +29,7 @@ import {
   user,
   comments,
 } from "@/server/db/schema";
-import { and, eq, desc, lt, lte, gt, sql, isNotNull, count } from "drizzle-orm";
+import { and, eq, desc, lt, lte, sql, isNotNull, count } from "drizzle-orm";
 import { increment } from "./utils";
 import crypto from "crypto";
 
@@ -1078,12 +1079,11 @@ export const contentRouter = createTRPCRouter({
       }));
     }),
 
-  // My Scheduled - get user's scheduled ARTICLE content (publishedAt > now)
+  // My Scheduled - get user's scheduled ARTICLE content
   myScheduled: protectedProcedure
     .input(MyScheduledContentSchema)
     .query(async ({ ctx, input }) => {
       const userId = ctx.session.user.id;
-      const now = new Date().toISOString();
 
       const results = await ctx.db
         .select({
@@ -1103,7 +1103,6 @@ export const contentRouter = createTRPCRouter({
             eq(posts.authorId, userId),
             eq(posts.type, "article"),
             eq(posts.status, "scheduled"),
-            gt(posts.publishedAt, now),
           ),
         )
         .orderBy(desc(posts.publishedAt))
@@ -1175,4 +1174,119 @@ export const contentRouter = createTRPCRouter({
 
       return updated;
     }),
+
+  // Get user-created link post by username and slug
+  getUserLinkBySlug: publicProcedure
+    .input(GetContentBySlugSchema.extend({ username: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session?.user?.id;
+
+      // Find the user
+      const userResult = await ctx.db
+        .select({ id: user.id })
+        .from(user)
+        .where(eq(user.username, input.username))
+        .limit(1);
+
+      if (userResult.length === 0) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "User not found",
+        });
+      }
+
+      const authorId = userResult[0].id;
+
+      // Find the link post
+      const linkPostResults = await ctx.db
+        .select({
+          id: posts.id,
+          type: posts.type,
+          title: posts.title,
+          body: posts.body,
+          excerpt: posts.excerpt,
+          externalUrl: posts.externalUrl,
+          coverImage: posts.coverImage,
+          slug: posts.slug,
+          publishedAt: posts.publishedAt,
+          upvotes: posts.upvotesCount,
+          downvotes: posts.downvotesCount,
+          showComments: posts.showComments,
+          createdAt: posts.createdAt,
+          updatedAt: posts.updatedAt,
+          // Author info
+          authorId: user.id,
+          authorName: user.name,
+          authorUsername: user.username,
+          authorImage: user.image,
+          authorBio: user.bio,
+        })
+        .from(posts)
+        .leftJoin(user, eq(posts.authorId, user.id))
+        .where(
+          and(
+            eq(posts.slug, input.slug),
+            eq(posts.authorId, authorId),
+            eq(posts.type, "link"),
+            eq(posts.status, "published"),
+            lte(posts.publishedAt, new Date().toISOString()),
+          ),
+        )
+        .limit(1);
+
+      if (linkPostResults.length === 0) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Link post not found",
+        });
+      }
+
+      const linkPost = linkPostResults[0];
+
+      // Get user vote if logged in
+      let userVote: "up" | "down" | null = null;
+      let isBookmarked = false;
+
+      if (userId) {
+        const [voteResult, bookmarkResult] = await Promise.all([
+          ctx.db
+            .select({ voteType: post_votes.voteType })
+            .from(post_votes)
+            .where(
+              and(
+                eq(post_votes.postId, linkPost.id),
+                eq(post_votes.userId, userId),
+              ),
+            )
+            .limit(1),
+          ctx.db
+            .select({ id: bookmarks.id })
+            .from(bookmarks)
+            .where(
+              and(
+                eq(bookmarks.postId, linkPost.id),
+                eq(bookmarks.userId, userId),
+              ),
+            )
+            .limit(1),
+        ]);
+
+        userVote = voteResult[0]?.voteType ?? null;
+        isBookmarked = bookmarkResult.length > 0;
+      }
+
+      return {
+        ...linkPost,
+        type: toFrontendType(linkPost.type),
+        userVote,
+        isBookmarked,
+        author: {
+          id: linkPost.authorId,
+          name: linkPost.authorName,
+          username: linkPost.authorUsername,
+          image: linkPost.authorImage,
+          bio: linkPost.authorBio,
+        },
+      };
+    }),
 });

From 1d030d8d3c176fc3a7826a5c6ab33ed2ef749914 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 16:41:22 +0000
Subject: [PATCH 14/19] feat(editor): add new PostEditor component and E2E test
 infrastructure

  - Add PostEditor with WriteTab and LinkTab for article/link creation
  - Add URL metadata fetching for link posts
  - Add article toolbar with formatting options
  - Add E2E editor tests and test utilities
  - Update E2E setup with link post test data
  - Update slash command and image upload extensions
---
 .../create/[[...paramsArr]]/_client.tsx       | 1356 +++++++++--------
 .../create/[[...paramsArr]]/navigation.tsx    |    9 +
 components/PostEditor/PostEditor.tsx          |  293 ++++
 components/PostEditor/components/TagInput.tsx |  173 +++
 .../components/UrlMetadataPreview.tsx         |  130 ++
 components/PostEditor/extensions/index.ts     |  181 +++
 .../PostEditor/extensions/s3-image-upload.ts  |  276 ++++
 .../PostEditor/hooks/useArticleEditor.ts      |  202 +++
 .../PostEditor/hooks/useLinkMetadata.ts       |  195 +++
 components/PostEditor/index.ts                |   22 +
 components/PostEditor/tabs/LinkTab.tsx        |  148 ++
 components/PostEditor/tabs/WriteTab.tsx       |  170 +++
 .../PostEditor/toolbar/ArticleToolbar.tsx     |  410 +++++
 .../editor/extensions/slash-command.tsx       |    6 +-
 components/editor/editor/index.tsx            |    2 +-
 .../editor/editor/plugins/upload-images.tsx   |    2 +-
 e2e/constants/constants.ts                    |    6 +
 e2e/editor.spec.ts                            | 1017 +++++++++++++
 e2e/setup.ts                                  |   38 +-
 e2e/utils/utils.ts                            |   56 +
 20 files changed, 4054 insertions(+), 638 deletions(-)
 create mode 100644 components/PostEditor/PostEditor.tsx
 create mode 100644 components/PostEditor/components/TagInput.tsx
 create mode 100644 components/PostEditor/components/UrlMetadataPreview.tsx
 create mode 100644 components/PostEditor/extensions/index.ts
 create mode 100644 components/PostEditor/extensions/s3-image-upload.ts
 create mode 100644 components/PostEditor/hooks/useArticleEditor.ts
 create mode 100644 components/PostEditor/hooks/useLinkMetadata.ts
 create mode 100644 components/PostEditor/index.ts
 create mode 100644 components/PostEditor/tabs/LinkTab.tsx
 create mode 100644 components/PostEditor/tabs/WriteTab.tsx
 create mode 100644 components/PostEditor/toolbar/ArticleToolbar.tsx
 create mode 100644 e2e/editor.spec.ts

diff --git a/app/(editor)/create/[[...paramsArr]]/_client.tsx b/app/(editor)/create/[[...paramsArr]]/_client.tsx
index 84abdf82..9e1b3fcb 100644
--- a/app/(editor)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/_client.tsx
@@ -1,28 +1,39 @@
 "use client";
+
 import * as Sentry from "@sentry/nextjs";
 import { ZodError } from "zod";
-import React, { useState, useEffect, Fragment, useRef } from "react";
-import { useForm } from "react-hook-form";
-import CustomTextareaAutosize from "@/components/CustomTextareAutosize/CustomTextareaAutosize";
+import React, {
+  useState,
+  useEffect,
+  Fragment,
+  useCallback,
+  Suspense,
+} from "react";
 import { toast } from "sonner";
 import {
   Disclosure,
   DisclosureButton,
   DisclosurePanel,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
   Transition,
+  TransitionChild,
 } from "@headlessui/react";
-import { ChevronUpIcon } from "@heroicons/react/20/solid";
-import type { UpdateContentInput } from "@/schema/content";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { ConfirmContentSchema } from "@/schema/content";
 import { api } from "@/server/trpc/react";
 import { removeMarkdown } from "@/utils/removeMarkdown";
 import { useDebounce } from "@/hooks/useDebounce";
 import Markdoc from "@markdoc/markdoc";
-import { useMarkdownHotkeys } from "@/markdoc/editor/hotkeys/hotkeys.markdoc";
-import { useMarkdownShortcuts } from "@/markdoc/editor/shortcuts/shortcuts.markdoc";
 import { markdocComponents } from "@/markdoc/components";
 import { config } from "@/markdoc/config";
-import { notFound, useParams, useRouter } from "next/navigation";
+import {
+  notFound,
+  useParams,
+  useRouter,
+  useSearchParams,
+} from "next/navigation";
 import { usePrompt } from "@/components/PromptService";
 import { Switch } from "@/components/Switch/Switch";
 import copy from "copy-to-clipboard";
@@ -32,128 +43,103 @@ import {
   isValidScheduleTime,
   status,
 } from "@/utils/post";
-import { ImageUp, LoaderCircle } from "lucide-react";
-import { uploadFile } from "@/utils/s3helpers";
-import { getUploadUrl } from "@/app/actions/getUploadUrl";
+import {
+  PenLine,
+  Link as LinkIcon,
+  Eye,
+  EyeOff,
+  Settings2,
+  Share2,
+} from "lucide-react";
 import EditorNav from "./navigation";
 import { type Session } from "next-auth";
-
-const Create = ({ session }: { session: Session | null }) => {
+import { motion, LayoutGroup } from "framer-motion";
+
+// Import new PostEditor components
+import { WriteTab } from "@/components/PostEditor/tabs/WriteTab";
+import { LinkTab } from "@/components/PostEditor/tabs/LinkTab";
+import { TagInput } from "@/components/PostEditor/components/TagInput";
+import type { LinkMetadata } from "@/components/PostEditor/hooks/useLinkMetadata";
+
+type PostType = "write" | "link";
+
+const TAB_CONFIG = [
+  {
+    id: "write" as const,
+    label: "Write",
+    icon: PenLine,
+    description: "Write an article",
+  },
+  {
+    id: "link" as const,
+    label: "Link",
+    icon: LinkIcon,
+    description: "Share a link",
+  },
+];
+
+// Inner component that uses useSearchParams
+const CreateContent = ({ session }: { session: Session | null }) => {
   const params = useParams();
   const router = useRouter();
+  const searchParams = useSearchParams();
 
   const postId = params?.paramsArr?.[0] || "";
 
-  // @TODO - Redirect to create/:id if paramArr.length > 2
+  // Tab state from URL
+  const initialTab = (searchParams.get("tab") as PostType) || "write";
+  const [activeTab, setActiveTab] = useState<PostType>(initialTab);
+
+  // Handle tab change with URL update
+  const handleTabChange = useCallback(
+    (tab: PostType) => {
+      setActiveTab(tab);
+      const newParams = new URLSearchParams(searchParams.toString());
+      newParams.set("tab", tab);
+      router.replace(`?${newParams.toString()}`, { scroll: false });
+    },
+    [searchParams, router],
+  );
 
-  const [viewPreview, setViewPreview] = useState<boolean>(false);
+  // Form state
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
   const [tags, setTags] = useState<string[]>([]);
-  const [tagValue, setTagValue] = useState<string>("");
-  const [savedTime, setSavedTime] = useState<string>("");
-  const [open, setOpen] = useState<boolean>(false);
-  const [isPostScheduled, setIsPostScheduled] = useState<boolean>(false);
-  const [shouldRefetch, setShouldRefetch] = useState<boolean>(true);
-  const [unsavedChanges, setUnsavedChanges] = useState<boolean>(false);
-  const [copied, setCopied] = useState<boolean>(false);
-  const [uploadUrl, setUploadUrl] = useState<string | null>(null);
-  const [uploadStatus, setUploadStatus] = useState<
-    "pending" | "error" | "success" | "default"
-  >("default");
+  const [excerpt, setExcerpt] = useState("");
+  const [canonicalUrl, setCanonicalUrl] = useState("");
+  const [publishedTime, setPublishedTime] = useState("");
+
+  // Link tab state
+  const [linkUrl, setLinkUrl] = useState("");
+  const [linkTitle, setLinkTitle] = useState("");
+  const [linkMetadata, setLinkMetadata] = useState<LinkMetadata | null>(null);
+
+  // UI state
+  const [viewPreview, setViewPreview] = useState(false);
+  const [savedTime, setSavedTime] = useState("");
+  const [showPublishConfirm, setShowPublishConfirm] = useState(false);
+  const [isPostScheduled, setIsPostScheduled] = useState(false);
+  const [shouldRefetch, setShouldRefetch] = useState(true);
+  const [unsavedChanges, setUnsavedChanges] = useState(false);
+  const [copied, setCopied] = useState(false);
   const [postStatus, setPostStatus] = useState<PostStatus | null>(null);
 
-  const { unsavedChanges: _unsaved, setUnsavedChanges: _setUnsaved } =
-    usePrompt();
+  // Tab locking - disable switching when content exists
+  const hasWriteContent = body.trim().length > 0;
+  const hasLinkContent = linkUrl.trim().length > 0;
+  const isWriteTabDisabled = hasLinkContent && activeTab === "link";
+  const isLinkTabDisabled = hasWriteContent && activeTab === "write";
+
+  const { setUnsavedChanges: _setUnsaved } = usePrompt();
 
   useEffect(() => {
     _setUnsaved(unsavedChanges);
   }, [unsavedChanges, _setUnsaved]);
 
-  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (uploadStatus === "pending") {
-      return toast.info("Upload in progress, please wait...");
-    }
-    if (e.target.files && e.target.files.length > 0) {
-      setUploadUrl(null);
-      setUploadStatus("pending");
-
-      const file = e.target.files[0];
-      const { size, type } = file;
-
-      try {
-        const res = await getUploadUrl({
-          size,
-          type,
-          uploadType: "uploads",
-        });
-
-        const signedUrl = res?.data;
-
-        if (!signedUrl) {
-          setUploadStatus("error");
-          return toast.error(
-            "Something went wrong uploading the photo, please retry.",
-          );
-        }
-
-        const { fileLocation } = await uploadFile(signedUrl, file);
-        if (!fileLocation) {
-          setUploadStatus("error");
-          return toast.error(
-            "Something went wrong uploading the photo, please retry.",
-          );
-        }
-        setUploadStatus("success");
-        setUploadUrl(fileLocation);
-      } catch (error) {
-        setUploadStatus("error");
-        toast.error(
-          error instanceof Error
-            ? error.message
-            : "An error occurred while uploading the image.",
-        );
-        Sentry.captureException(error);
-      }
-    }
-  };
-
-  const allowUpdate = unsavedChanges;
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useMarkdownHotkeys(textareaRef);
-  useMarkdownShortcuts(textareaRef);
-
-  // Form input type for the editor
-  type EditorFormInput = {
-    id?: string;
-    title: string;
-    body: string;
-    excerpt?: string;
-    canonicalUrl?: string;
-    published?: string;
-    tags?: string[];
-  };
-
-  const {
-    handleSubmit,
-    register,
-    watch,
-    reset,
-    getValues,
-    formState: { isDirty, errors },
-    setError,
-    clearErrors,
-  } = useForm<EditorFormInput>({
-    mode: "onSubmit",
-    defaultValues: {
-      title: "",
-      body: "",
-    },
-  });
-
-  const { title, body, published } = watch();
-
+  // Debounce for auto-save
   const debouncedValue = useDebounce(title + body, 1500);
 
+  // TRPC mutations
   const {
     mutate: publish,
     status: publishStatus,
@@ -167,19 +153,18 @@ const Create = ({ session }: { session: Session | null }) => {
 
   const { mutate: save, status: saveStatus } = api.content.update.useMutation({
     onError(error) {
-      // TODO: Add error messages from field validations
       toast.error("Error auto-saving");
       Sentry.captureException(error);
     },
   });
+
   const {
-    mutate: create,
+    mutateAsync: create,
     data: createData,
     isError,
-    isSuccess,
   } = api.content.create.useMutation();
 
-  // Fetch user's own content for editing
+  // Fetch existing draft for editing
   const {
     data,
     status: dataStatus,
@@ -191,19 +176,18 @@ const Create = ({ session }: { session: Session | null }) => {
     },
   );
 
-  const PREVIEW_URL = `${process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://www.codu.co"}/draft/${postId}`;
-  const UPLOADED_IMAGE_URL = `![Image description](${uploadUrl})`;
+  const PREVIEW_URL = `${process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://www.codu.co"}/draft/${createData?.id || postId}`;
 
   const handleCopyToClipboard = () => {
     copy(PREVIEW_URL);
     setCopied(true);
   };
 
+  // Error handling
   useEffect(() => {
     if (isError) {
       toast.error("Error saving");
     }
-
     if (draftFetchError) {
       notFound();
     }
@@ -220,40 +204,53 @@ const Create = ({ session }: { session: Session | null }) => {
     return () => clearTimeout(to);
   }, [copied]);
 
-  const getFormData = () => {
-    const data = getValues();
-    const formData = {
-      ...data,
+  // Get form data for saving
+  const getFormData = useCallback(() => {
+    const currentExcerpt =
+      excerpt || removeMarkdown(body, {}).substring(0, 155);
+    return {
+      title,
+      body,
       tags,
-      canonicalUrl: data.canonicalUrl || undefined,
-      excerpt: data.excerpt || removeMarkdown(data.body, {}).substring(0, 155),
+      excerpt: currentExcerpt,
+      canonicalUrl: canonicalUrl || undefined,
+      published: publishedTime,
     };
-    return formData;
-  };
+  }, [title, body, tags, excerpt, canonicalUrl, publishedTime]);
 
-  const savePost = async () => {
+  // Save post - returns the post ID (either new or existing)
+  const savePost = useCallback(async (): Promise<string> => {
     const formData = getFormData();
-    // Don't include published time when saving content, handle separately in onSubmit
-    const { published: _published, ...saveData } = formData;
-    if (!formData.id) {
-      // Create new content as ARTICLE type
-      await create({
-        type: "POST",
-        title: saveData.title,
-        body: saveData.body,
-        excerpt: saveData.excerpt,
-        canonicalUrl: saveData.canonicalUrl,
-        tags: saveData.tags,
+
+    if (!postId) {
+      // Create new content
+      const result = await create({
+        type: activeTab === "link" ? "LINK" : "POST",
+        title: activeTab === "link" ? linkTitle || title : formData.title,
+        body: activeTab === "link" ? "" : formData.body,
+        excerpt:
+          activeTab === "link"
+            ? linkMetadata?.description || ""
+            : formData.excerpt,
+        canonicalUrl: activeTab === "write" ? formData.canonicalUrl : undefined,
+        externalUrl: activeTab === "link" ? linkUrl : undefined,
+        tags: formData.tags,
         published: false,
       });
+      setUnsavedChanges(false);
+      return result.id;
     } else {
       await save({
         id: postId,
-        title: saveData.title,
-        body: saveData.body,
-        excerpt: saveData.excerpt,
-        canonicalUrl: saveData.canonicalUrl,
-        tags: saveData.tags,
+        title: activeTab === "link" ? linkTitle || title : formData.title,
+        body: activeTab === "link" ? "" : formData.body,
+        excerpt:
+          activeTab === "link"
+            ? linkMetadata?.description || ""
+            : formData.excerpt,
+        canonicalUrl: activeTab === "write" ? formData.canonicalUrl : undefined,
+        externalUrl: activeTab === "link" ? linkUrl : undefined,
+        tags: formData.tags,
       });
       setSavedTime(
         new Date().toLocaleString(undefined, {
@@ -261,172 +258,260 @@ const Create = ({ session }: { session: Session | null }) => {
           timeStyle: "short",
         }),
       );
+      setUnsavedChanges(false);
+      return postId;
     }
-    setUnsavedChanges(false);
-  };
+  }, [
+    getFormData,
+    postId,
+    create,
+    save,
+    activeTab,
+    linkTitle,
+    title,
+    linkUrl,
+    linkMetadata,
+  ]);
 
   const hasLoadingState =
     publishStatus === "pending" ||
     saveStatus === "pending" ||
-    dataStatus === "pending";
+    (!!postId && dataStatus === "pending");
 
   const currentPostStatus = data?.publishedAt
     ? getPostStatus(new Date(data.publishedAt))
     : status.DRAFT;
 
-  const onSubmit = async (inputData: EditorFormInput) => {
-    // validate markdoc syntax
-    const ast = Markdoc.parse(inputData.body);
-    const errors = Markdoc.validate(ast, config).filter(
-      (e) => e.error.level === "critical",
-    );
-
-    if (errors.length > 0) {
-      console.error(errors);
-      errors.forEach((err) => {
-        toast.error(err.error.message);
-      });
-      return;
-    }
-
-    await savePost();
+  // Handle publish/submit
+  const onSubmit = async () => {
+    // Validate content BEFORE saving
+    if (activeTab === "write") {
+      // For write tab, validate markdoc syntax
+      const ast = Markdoc.parse(body);
+      const errors = Markdoc.validate(ast, config).filter(
+        (e) => e.error.level === "critical",
+      );
 
-    if (currentPostStatus === status.PUBLISHED) {
-      if (data && session?.user?.username) {
-        router.push(`/${session.user.username}/${data.slug}`);
+      if (errors.length > 0) {
+        console.error(errors);
+        errors.forEach((err) => {
+          toast.error(err.error.message);
+        });
+        return;
+      }
+    } else {
+      // For link tab, validate URL and title
+      if (!linkUrl || !linkTitle) {
+        toast.error("URL and title are required for link posts");
+        return;
       }
-      return;
     }
 
     try {
+      // Save the post and get the ID (important for new posts)
+      const savedPostId = await savePost();
+
+      // If already published, just redirect
+      if (currentPostStatus === status.PUBLISHED) {
+        setUnsavedChanges(false);
+        setShowPublishConfirm(false);
+        if (data && session?.user?.username) {
+          router.push(`/${session.user.username}/${data.slug}`);
+        }
+        return;
+      }
+
       const formData = getFormData();
-      ConfirmContentSchema.parse(formData);
-      await publish({
-        id: postId,
-        published: true,
-        publishTime:
-          isPostScheduled && formData.published
-            ? new Date(formData.published)
-            : new Date(),
-      });
+
+      // Additional content validation for write tab
+      if (activeTab === "write") {
+        ConfirmContentSchema.parse(formData);
+      }
+
+      // Use the saved post ID (not the one from URL params which might be stale)
+      // Use mutateAsync pattern for proper await
+      const publishResult = await new Promise<{ slug: string }>(
+        (resolve, reject) => {
+          publish(
+            {
+              id: savedPostId,
+              published: true,
+              publishTime:
+                isPostScheduled && publishedTime
+                  ? new Date(publishedTime)
+                  : new Date(),
+            },
+            {
+              onSuccess: (data) => resolve(data),
+              onError: (error) => reject(error),
+            },
+          );
+        },
+      );
+
+      // Clear states immediately
+      setUnsavedChanges(false);
+      setShowPublishConfirm(false);
+
+      // Redirect based on scheduling
+      if (session?.user?.username && publishResult?.slug) {
+        if (isPostScheduled) {
+          toast.success("Post scheduled!");
+          router.push("/my-posts?tab=scheduled");
+        } else {
+          toast.success("Published!");
+          router.push(`/${session.user.username}/${publishResult.slug}`);
+        }
+      }
     } catch (err) {
       if (err instanceof ZodError) {
         return toast.error(err.issues[0].message);
       } else {
-        return toast.error("Something went when trying to publish.");
+        console.error("Publish error:", err);
+        return toast.error("Something went wrong when trying to publish.");
       }
     }
   };
 
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    const { value } = e.target;
-    setTagValue(value);
-  };
-
-  const onDelete = (tag: string) => {
-    setTags((t) => t.filter((t) => t !== tag));
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (errors.tags) {
-      clearErrors("tags");
-    }
-    const { key } = e;
-    const trimmedInput = tagValue
-      .trim()
-      .toUpperCase()
-      .replace(/[^\w\s]/gi, "");
-    if (
-      (key === "," || key === "." || key === "Enter") &&
-      trimmedInput.length
-    ) {
-      if (!tags.includes(trimmedInput)) {
-        e.preventDefault();
-        setTags((prevState) => [...prevState, trimmedInput]);
-        setTagValue("");
-      } else {
-        setError("tags", {
-          type: "manual",
-          message: "Tag already exists",
-        });
-        e.preventDefault();
-        setTagValue("");
+  // Load existing data
+  useEffect(() => {
+    if (!data) return;
+    const {
+      body: existingBody,
+      excerpt: existingExcerpt,
+      title: existingTitle,
+      tags: existingTags,
+      publishedAt,
+      canonicalUrl: existingCanonical,
+      type: postType,
+      externalUrl,
+    } = data;
+
+    // Handle link posts vs article posts (case-insensitive check)
+    if (postType?.toLowerCase() === "link") {
+      setLinkTitle(existingTitle || "");
+      setLinkUrl(externalUrl || "");
+      // Only switch tab if not already on link tab (preserve URL param on initial load)
+      if (activeTab !== "link") {
+        setActiveTab("link");
       }
+    } else {
+      setTitle(existingTitle || "");
+      setBody(existingBody || "");
+      setCanonicalUrl(existingCanonical || "");
     }
-  };
 
-  useEffect(() => {
-    if (!data) return;
-    const { body, excerpt, title, id, tags, publishedAt } = data;
-    setTags(tags.map(({ tag }) => tag.title.toUpperCase()));
-    reset({
-      body: body || "",
-      excerpt: excerpt || "",
-      title: title || "",
-      id,
-      published: publishedAt ? publishedAt : undefined,
-    });
+    setExcerpt(existingExcerpt || "");
+    setTags(existingTags.map(({ tag }) => tag.title.toUpperCase()));
+    setPublishedTime(publishedAt || "");
     setIsPostScheduled(
       publishedAt ? new Date(publishedAt) > new Date() : false,
     );
     setPostStatus(
       publishedAt ? getPostStatus(new Date(publishedAt)) : status.DRAFT,
     );
-  }, [data, reset]);
+  }, [data, activeTab]);
 
+  // Update post status based on content
   useEffect(() => {
     if ((title + body).length < 5) {
       setPostStatus(null);
     } else if (postStatus === null) {
       setPostStatus(status.DRAFT);
     }
-  }, [title, body]);
+  }, [title, body, postStatus]);
 
+  // Auto-save for drafts
   useEffect(() => {
     if (currentPostStatus !== status.DRAFT) return;
-    if ((title + body).length < 5) return;
+    // For write tab, require both title and body; for link tab, require url and title
+    if (activeTab === "write") {
+      if (title.length < 5 || body.length < 10) return;
+    } else {
+      if (!linkUrl || !linkTitle) return;
+    }
     if (debouncedValue === (data?.title || "") + data?.body) return;
-    if (allowUpdate) savePost();
-  }, [debouncedValue]);
+    if (unsavedChanges) savePost();
+  }, [
+    debouncedValue,
+    currentPostStatus,
+    data?.title,
+    data?.body,
+    unsavedChanges,
+    savePost,
+    title,
+    body,
+    activeTab,
+    linkUrl,
+    linkTitle,
+  ]);
 
+  // Redirect after creating new post - preserve tab parameter
   useEffect(() => {
     if (!createData?.id) return;
-    router.push(`create/${createData.id}`);
-  }, [createData]);
+    const tabParam = activeTab !== "write" ? `?tab=${activeTab}` : "";
+    router.push(`create/${createData.id}${tabParam}`);
+  }, [createData, router, activeTab]);
 
-  const hasContent = title.length >= 5 && body.length >= 10;
+  // Check if form has enough content
+  const hasContent =
+    activeTab === "write"
+      ? title.length >= 5 && body.length >= 10
+      : linkUrl.length > 0 && linkTitle.length > 0;
 
   const isDisabled = hasLoadingState || !hasContent;
 
+  // Track unsaved changes for write tab
   useEffect(() => {
+    if (activeTab !== "write") return;
     if ((title + body).length < 5) return;
-    if (isDirty) setUnsavedChanges(true);
-  }, [title, body]);
+    setUnsavedChanges(true);
+  }, [title, body, activeTab]);
 
+  // Track unsaved changes for link tab
   useEffect(() => {
-    if (
-      publishStatus === "success" &&
-      publishData?.slug &&
-      session?.user?.username
-    ) {
-      if (isPostScheduled) {
-        router.push("/my-posts?tab=scheduled");
-      } else {
-        router.push(`/${session.user.username}/${publishData.slug}`);
-      }
-    }
-  }, [
-    publishStatus,
-    publishData,
-    isPostScheduled,
-    router,
-    session?.user?.username,
-  ]);
+    if (activeTab !== "link") return;
+    if (!linkUrl && !linkTitle) return;
+    setUnsavedChanges(true);
+  }, [linkUrl, linkTitle, activeTab]);
+
+  // Note: Redirect after publish is now handled directly in onSubmit for better flow control
 
   const handlePublish = () => {
     if (isDisabled) return;
-    setOpen(true);
+    setShowPublishConfirm(true);
+  };
+
+  // Handle content changes from WriteTab
+  const handleTitleChange = useCallback((newTitle: string) => {
+    setTitle(newTitle);
+  }, []);
+
+  const handleBodyChange = useCallback((newBody: string) => {
+    setBody(newBody);
+  }, []);
+
+  // Handle link metadata
+  const handleMetadataFetched = useCallback(
+    (metadata: LinkMetadata) => {
+      setLinkMetadata(metadata);
+      if (metadata.title && !linkTitle) {
+        setLinkTitle(metadata.title);
+      }
+    },
+    [linkTitle],
+  );
+
+  // Get publish button text
+  const getPublishButtonText = () => {
+    if (currentPostStatus === status.PUBLISHED) return "Save changes";
+    if (currentPostStatus === status.DRAFT) {
+      return isPostScheduled ? "Schedule" : "Publish now";
+    }
+    if (currentPostStatus === status.SCHEDULED) {
+      return isPostScheduled ? "Update schedule" : "Publish now";
+    }
+    return "Publish";
   };
 
   return (
@@ -438,99 +523,303 @@ const Create = ({ session }: { session: Session | null }) => {
         unsavedChanges={unsavedChanges}
         onPublish={handlePublish}
         isDisabled={isDisabled}
+        savedTime={savedTime}
+        isSaving={saveStatus === "pending"}
       />
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Transition show={open} as={Fragment}>
-          <div className="old-input fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
-            <div className="m-2 max-w-full">
-              <button
-                type="button"
-                className="absolute right-8 top-8 z-50 cursor-pointer underline"
-                onClick={() => setOpen(false)}
-              >
-                Close
-              </button>
-              <div className="relative flex h-full flex-col items-center justify-center overflow-y-auto">
-                <div className="pb-8 pt-16">
-                  <div className="block w-full max-w-2xl gap-6 sm:grid sm:grid-cols-12">
-                    <div className="mt-8 sm:col-span-6 sm:mt-0">
-                      <label htmlFor="excerpt">Excerpt</label>
-                      <textarea
-                        maxLength={156}
-                        id="excerpt"
-                        rows={3}
-                        {...register("excerpt")}
-                      />
-                      <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-                        What readers will see before they click on your article.
-                        Good SEO descriptions utilize keywords, summarize the
-                        story and are between 140-156 characters long.
-                      </small>
-                    </div>
-                    <div className="my-4 sm:col-span-6 sm:my-0">
-                      <label htmlFor="tags">Topics</label>
-                      <input
-                        id="tags"
-                        name="tag"
-                        disabled={tags.length >= 5}
-                        placeholder={
-                          tags.length >= 5
-                            ? "Maximum 5 tags"
-                            : "Comma seperated tags"
-                        }
-                        type="text"
-                        onChange={(e) => onChange(e)}
-                        value={tagValue}
-                        onKeyDown={onKeyDown}
-                      />
-                      {errors.tags && (
-                        <p className="mt-1 text-sm text-red-600">
-                          {`${
-                            errors.tags.message ||
-                            "Something is wrong with the tags"
-                          }`}
-                        </p>
+
+      {/* Whimsical Pre-Publish Dialog */}
+      <Transition show={showPublishConfirm} as={Fragment}>
+        <Dialog
+          onClose={() => setShowPublishConfirm(false)}
+          className="relative z-50"
+        >
+          <TransitionChild
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+          </TransitionChild>
+
+          <div className="fixed inset-0 flex items-center justify-center p-4">
+            <TransitionChild
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <DialogPanel className="mx-auto max-w-md rounded-xl bg-white p-8 text-center shadow-xl dark:bg-neutral-900">
+                <div className="mb-3 text-5xl">
+                  {isPostScheduled ? "⏰" : activeTab === "link" ? "🔗" : "🚀"}
+                </div>
+                <DialogTitle className="text-xl font-bold text-neutral-900 dark:text-white">
+                  {isPostScheduled
+                    ? "Time travel activated!"
+                    : activeTab === "link"
+                      ? "Spread the word!"
+                      : "Ready to launch?"}
+                </DialogTitle>
+                <p className="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
+                  {isPostScheduled
+                    ? `"${title || "Untitled"}" will appear on ${new Date(publishedTime).toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" })} at ${new Date(publishedTime).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`
+                    : activeTab === "link"
+                      ? "Share this gem with the community?"
+                      : `Your masterpiece "${title || "Untitled"}" is about to go live!`}
+                </p>
+                <div className="mt-8 flex justify-center gap-3">
+                  <button
+                    type="button"
+                    onClick={() => setShowPublishConfirm(false)}
+                    className="rounded-lg border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-800"
+                  >
+                    {isPostScheduled
+                      ? "Change my mind"
+                      : activeTab === "link"
+                        ? "Not yet"
+                        : "Maybe later"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={onSubmit}
+                    disabled={hasLoadingState}
+                    className="rounded-lg bg-pink-500 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-pink-600 disabled:opacity-50"
+                  >
+                    {hasLoadingState
+                      ? "Working on it..."
+                      : isPostScheduled
+                        ? "Set it and forget it!"
+                        : activeTab === "link"
+                          ? "Share it!"
+                          : "Let's do this!"}
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </Dialog>
+      </Transition>
+
+      {/* Loading state */}
+      {dataStatus === "pending" && postId && (
+        <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center">
+          <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
+            <div className="loader-dots relative mt-2 block h-5 w-20">
+              <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
+              <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
+              <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
+              <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
+            </div>
+            <div className="mt-2 text-center text-xs font-medium text-neutral-400">
+              Fetching post data.
+            </div>
+          </div>
+          <div className="z-60 absolute bottom-0 left-0 right-0 top-0 bg-black opacity-25" />
+        </div>
+      )}
+
+      {/* Main content area - single card layout */}
+      <div className="mx-auto w-full max-w-3xl px-4 py-6">
+        <div className="overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
+          {/* Tab Bar with pink underline */}
+          <div className="flex items-center justify-between border-b border-neutral-200 px-4 py-3 dark:border-neutral-700">
+            <LayoutGroup id="editor-tabs">
+              <div className="flex gap-1">
+                {TAB_CONFIG.map((tab) => {
+                  const Icon = tab.icon;
+                  const isActive = activeTab === tab.id;
+                  const isDisabledTab =
+                    tab.id === "write" ? isWriteTabDisabled : isLinkTabDisabled;
+
+                  return (
+                    <button
+                      key={tab.id}
+                      type="button"
+                      onClick={() => !isDisabledTab && handleTabChange(tab.id)}
+                      disabled={isDisabledTab}
+                      title={
+                        isDisabledTab
+                          ? `Clear ${tab.id === "write" ? "link URL" : "article content"} to switch tabs`
+                          : tab.description
+                      }
+                      className={`relative flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+                        isDisabledTab
+                          ? "cursor-not-allowed opacity-50"
+                          : isActive
+                            ? "text-neutral-900 dark:text-white"
+                            : "text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white"
+                      }`}
+                    >
+                      <Icon className="h-4 w-4" />
+                      {tab.label}
+                      {isActive && (
+                        <motion.div
+                          layoutId="active-tab-indicator"
+                          className="absolute inset-x-0 -bottom-3 h-0.5 bg-pink-600"
+                          transition={{
+                            type: "spring",
+                            bounce: 0.2,
+                            duration: 0.5,
+                          }}
+                        />
                       )}
+                    </button>
+                  );
+                })}
+              </div>
+            </LayoutGroup>
+
+            {/* Share Draft & Preview toggle */}
+            <div className="flex items-center gap-4">
+              {activeTab === "write" && (createData?.id || postId) && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    const draftUrl = `${window.location.origin}/draft/${createData?.id || postId}`;
+                    navigator.clipboard.writeText(draftUrl);
+                    toast.success("Draft link copied!");
+                  }}
+                  className="flex items-center gap-1.5 text-sm text-neutral-500 transition-colors hover:text-pink-600 dark:text-neutral-400 dark:hover:text-pink-500"
+                >
+                  <Share2 className="h-4 w-4" />
+                  Share Draft
+                </button>
+              )}
+              {activeTab === "write" && (
+                <button
+                  type="button"
+                  onClick={() => setViewPreview((current) => !current)}
+                  className="flex items-center gap-2 rounded-md border border-neutral-200 px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-800"
+                >
+                  {viewPreview ? (
+                    <>
+                      <EyeOff className="h-4 w-4" />
+                      Edit
+                    </>
+                  ) : (
+                    <>
+                      <Eye className="h-4 w-4" />
+                      Preview
+                    </>
+                  )}
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Editor Content */}
+          {activeTab === "write" ? (
+            viewPreview ? (
+              // Preview mode - matches published article width
+              <section className="px-6 py-8">
+                <article
+                  className="prose prose-neutral mx-auto max-w-none dark:prose-invert lg:prose-lg"
+                  style={{
+                    whiteSpace: "pre-wrap",
+                    overflowWrap: "anywhere",
+                  }}
+                >
+                  <h1>{title || "Untitled"}</h1>
+                  {Markdoc.renderers.react(
+                    Markdoc.transform(Markdoc.parse(body), config),
+                    React,
+                    {
+                      components: markdocComponents,
+                    },
+                  )}
+                </article>
+              </section>
+            ) : (
+              // Edit mode - TipTap Editor
+              <WriteTab
+                initialContent={body}
+                title={title}
+                onTitleChange={handleTitleChange}
+                onBodyChange={handleBodyChange}
+                titlePlaceholder="Article title"
+                editorPlaceholder="Start writing your article..."
+                className="min-h-[500px]"
+              />
+            )
+          ) : (
+            // Link tab
+            <LinkTab
+              url={linkUrl}
+              onUrlChange={setLinkUrl}
+              title={linkTitle}
+              onTitleChange={setLinkTitle}
+              onMetadataFetched={handleMetadataFetched}
+              urlPlaceholder="https://example.com/interesting-article"
+              titlePlaceholder="Link title (auto-populated from URL)"
+            />
+          )}
+
+          {/* Tags section - with divider */}
+          <div className="border-t border-neutral-200 p-4 dark:border-neutral-700">
+            <TagInput
+              tags={tags}
+              onChange={setTags}
+              maxTags={5}
+              label="Tags"
+              helpText="Add up to 5 tags to help readers find your post."
+            />
+          </div>
+
+          {/* More Options - collapsible accordion (Write tab only) */}
+          {activeTab === "write" && (
+            <Disclosure>
+              {({ open: disclosureOpen }) => (
+                <>
+                  <DisclosureButton className="flex w-full items-center justify-between border-t border-neutral-200 px-4 py-3 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-50 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                    <span className="flex items-center gap-2">
+                      <Settings2 className="h-4 w-4" />
+                      More Options
+                      <span className="text-xs font-normal text-neutral-500">
+                        (SEO, scheduling)
+                      </span>
+                    </span>
+                    <ChevronDownIcon
+                      className={`${disclosureOpen ? "rotate-180" : ""} h-5 w-5 text-neutral-400 transition-transform`}
+                    />
+                  </DisclosureButton>
+                  <DisclosurePanel className="border-t border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
+                    <div className="space-y-6">
+                      {/* Excerpt */}
                       <div>
-                        {tags.map((tag) => (
-                          <div
-                            key={tag}
-                            className="mr-1 mt-2 inline-flex items-center overflow-hidden bg-neutral-300 text-sm"
-                          >
-                            <span
-                              className="ml-2 mr-1 max-w-xs truncate px-1 text-xs font-semibold leading-relaxed text-black"
-                              x-text="tag"
-                            >
-                              {tag}
-                            </span>
-                            <button
-                              onClick={() => onDelete(tag)}
-                              className="inline-block h-6 w-6 bg-neutral-600 align-middle text-white focus:outline-none"
-                            >
-                              <svg
-                                className="mx-auto h-6 w-6 fill-current"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  fillRule="evenodd"
-                                  d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        ))}
+                        <label
+                          htmlFor="excerpt"
+                          className="mb-1 block text-sm font-medium text-neutral-800 dark:text-white"
+                        >
+                          Excerpt
+                        </label>
+                        <textarea
+                          maxLength={156}
+                          id="excerpt"
+                          rows={3}
+                          value={excerpt}
+                          onChange={(e) => setExcerpt(e.target.value)}
+                          placeholder={
+                            removeMarkdown(body, {}).substring(0, 155) ||
+                            "Brief description of your post..."
+                          }
+                          className="w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-pink-500 focus:outline-none focus:ring-1 focus:ring-pink-500 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-500"
+                        />
+                        <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                          What readers will see before clicking. Good SEO
+                          descriptions are 140-156 characters.
+                        </p>
                       </div>
-                      <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-                        Tag with up to 5 topics. This makes it easier for
-                        readers to find and know what your story is about.
-                      </small>
-                    </div>
 
-                    {data &&
-                      (data.publishedAt === null ||
+                      {/* Schedule post - show for new drafts and unpublished posts */}
+                      {(!data?.publishedAt ||
                         new Date(data.publishedAt) > new Date()) && (
-                        <div className="col-span-12">
+                        <div>
                           <div className="mb-2 flex items-center gap-2">
                             <label
                               htmlFor="schedule-switch"
@@ -547,320 +836,123 @@ const Create = ({ session }: { session: Session | null }) => {
                           {isPostScheduled && (
                             <input
                               type="datetime-local"
-                              {...register("published")}
+                              value={publishedTime}
+                              onChange={(e) => setPublishedTime(e.target.value)}
                               min={new Date().toISOString().slice(0, 16)}
+                              className="w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-pink-500 focus:outline-none focus:ring-1 focus:ring-pink-500 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white"
                             />
                           )}
-                          <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+                          <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
                             Publish your post at a later time.
-                          </small>
+                          </p>
                         </div>
                       )}
 
-                    <div className="col-span-12 border-b border-neutral-300 pb-4">
-                      <Disclosure>
-                        {({ open }) => (
-                          <>
-                            <DisclosureButton className="flex w-full justify-between py-2 text-left text-sm font-medium text-neutral-800 focus:outline-none focus-visible:ring focus-visible:ring-pink-500 focus-visible:ring-opacity-75 dark:text-white">
-                              <span>More Options</span>
-                              <ChevronUpIcon
-                                className={`${
-                                  open ? "" : "rotate-180 transform"
-                                } h-5 w-5 text-neutral-400`}
-                              />
-                            </DisclosureButton>
-                            <DisclosurePanel className="pb-2 pt-4">
-                              <label htmlFor="canonicalUrl">
-                                Canonical URL
-                              </label>
-                              <input
-                                id="canonicalUrl"
-                                type="text"
-                                placeholder="https://www.somesite.com/i-posted-here-first"
-                                defaultValue={
-                                  data?.canonicalUrl ? data.canonicalUrl : ""
-                                }
-                                {...register("canonicalUrl")}
-                              />
-                              <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-                                Add this if the post was originally published
-                                elsewhere and you want to link to it as the
-                                original source.
-                              </p>
-                              <h3 className="mb-1 mt-2 text-sm font-medium text-neutral-800 dark:text-white">
-                                Draft link
-                              </h3>
-                              <button
-                                onClick={handleCopyToClipboard}
-                                type="button"
-                                className="relative flex w-full focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:bg-neutral-50 disabled:opacity-50"
-                              >
-                                <div className="flex w-full max-w-full flex-1 overflow-hidden border px-2 py-2 text-left text-black shadow-sm ring-offset-1 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-neutral-300 disabled:opacity-50 dark:border-white dark:bg-black dark:text-white sm:text-sm">
-                                  {PREVIEW_URL}
-                                </div>
-                                <div className="absolute bottom-0 right-0 top-0 w-[120px] border border-neutral-300 bg-white px-4 py-2 font-medium text-neutral-600 shadow-sm">
-                                  {copied ? "Copied" : "Copy Link"}
-                                </div>
-                              </button>
-                              <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-                                Share this link with others to preview your
-                                draft. Anyone with the link can view your draft.
-                              </p>
-                            </DisclosurePanel>
-                          </>
-                        )}
-                      </Disclosure>
-                    </div>
-                    <div className="mt-4 flex w-full justify-end sm:col-span-12 sm:mt-0">
-                      {currentPostStatus === status.DRAFT && (
-                        <button
-                          type="button"
-                          disabled={isDisabled}
-                          className="inline-flex justify-center border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:bg-neutral-50 disabled:opacity-50"
-                          onClick={async () => {
-                            if (isDisabled) return;
-                            await savePost();
-                            router.push("/my-posts?tab=drafts");
-                          }}
-                        >
-                          Save draft
-                        </button>
-                      )}
-                      <button
-                        type="submit"
-                        disabled={
-                          isDisabled ||
-                          (isPostScheduled && isValidScheduleTime(published))
-                        }
-                        className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:from-orange-300 active:hover:to-pink-500 disabled:opacity-50"
-                      >
-                        {hasLoadingState ? (
-                          <>
-                            <div className="mr-2 h-5 w-5 animate-spin rounded-full border-2 border-orange-600 border-t-white" />
-                            {"Saving"}
-                          </>
-                        ) : (
-                          <>
-                            {currentPostStatus === status.PUBLISHED
-                              ? "Save changes"
-                              : currentPostStatus === status.DRAFT
-                                ? isPostScheduled
-                                  ? "Schedule"
-                                  : "Publish now"
-                                : currentPostStatus === status.SCHEDULED
-                                  ? isPostScheduled
-                                    ? "Update schedule"
-                                    : "Publish now"
-                                  : "Publish"}
-                          </>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Transition>
-        {dataStatus === "pending" && postId && (
-          <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center">
-            <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
-              <div className="loader-dots relative mt-2 block h-5 w-20">
-                <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
-                <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
-                <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
-                <div className="absolute top-0 mt-1 h-3 w-3 rounded-full bg-gradient-to-r from-orange-400 to-pink-600 shadow-sm"></div>
-              </div>
-              <div className="mt-2 text-center text-xs font-medium text-neutral-400">
-                Fetching post data.
-              </div>
-            </div>
-            <div className="z-60 absolute bottom-0 left-0 right-0 top-0 bg-black opacity-25" />
-          </div>
-        )}
-        <>
-          <div className="mx-auto w-full max-w-7xl flex-grow lg:flex xl:px-8">
-            {/* Left sidebar & main wrapper */}
-            <div className="min-w-0 flex-1 xl:flex">
-              <div className="xl:w-64 xl:flex-shrink-0">
-                <div className="h-full py-6 pl-4 pr-6 sm:pl-6 lg:px-4 xl:pl-0">
-                  {/* Start left column area */}
-                  <div className="relative h-full">
-                    <div className="bg-white p-6 text-neutral-600 shadow dark:bg-neutral-900">
-                      <h1 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
-                        {viewPreview ? "Previewing" : "Editing"} post
-                      </h1>
-                      <p className="mt-2 text-neutral-600 dark:text-neutral-400">
-                        The body of your content can be edited using markdown.
-                        Your post remains private until you
-                        &#8220;publish&#8221; the article.
-                      </p>
-                      <div className="flex">
-                        <button
-                          type="button"
-                          className="mt-4 inline-flex justify-center border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-600 shadow-sm hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2"
-                          onClick={() => setViewPreview((current) => !current)}
+                      {/* Canonical URL */}
+                      <div>
+                        <label
+                          htmlFor="canonicalUrl"
+                          className="mb-1 block text-sm font-medium text-neutral-800 dark:text-white"
                         >
-                          {viewPreview ? "Back to editing" : "View preview"}
-                        </button>
+                          Canonical URL
+                        </label>
+                        <input
+                          id="canonicalUrl"
+                          type="text"
+                          placeholder="https://www.somesite.com/i-posted-here-first"
+                          value={canonicalUrl}
+                          onChange={(e) => setCanonicalUrl(e.target.value)}
+                          className="w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-pink-500 focus:outline-none focus:ring-1 focus:ring-pink-500 dark:border-neutral-600 dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-500"
+                        />
+                        <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                          Add this if the post was originally published
+                          elsewhere.
+                        </p>
                       </div>
-                    </div>
-                  </div>
-                  {/* End left column area */}
-                </div>
-              </div>
-              <div className="lg:min-w-0 lg:flex-1">
-                <div className="h-full px-4 py-0 sm:px-6 lg:px-4 lg:py-6">
-                  {/* Start main area*/}
-                  <div className="relative h-full">
-                    <div className="bg-white text-black shadow dark:bg-neutral-900 dark:text-white">
-                      {viewPreview ? (
-                        <section className="mx-auto max-w-xl px-4 py-6 pb-4 sm:p-6 lg:pb-8">
-                          <article
-                            className="prose"
-                            style={{
-                              whiteSpace: "pre-wrap",
-                              overflowWrap: "anywhere",
-                            }}
-                          >
-                            <h1>{title}</h1>
-                            {Markdoc.renderers.react(
-                              Markdoc.transform(Markdoc.parse(body), config),
-                              React,
-                              {
-                                components: markdocComponents,
-                              },
-                            )}
-                          </article>
-                        </section>
-                      ) : (
-                        <div className="px-4 py-6 sm:p-6 lg:pb-8">
-                          <div className="mb-4 ml-2 flex items-center gap-2">
-                            <label
-                              htmlFor="file-input"
-                              className={`flex flex-row items-center gap-1 rounded-md border p-2 text-sm ${uploadStatus === "pending" ? "border-neutral-600 font-medium text-neutral-600 hover:cursor-not-allowed dark:border-neutral-500 dark:text-neutral-500" : "border-neutral-500 font-medium text-neutral-500 hover:bg-neutral-200 dark:border-neutral-600 dark:text-neutral-600 hover:dark:bg-neutral-800 hover:dark:text-neutral-400"} `}
-                            >
-                              {uploadStatus === "pending" ? (
-                                <LoaderCircle
-                                  height={16}
-                                  width={16}
-                                  className="mr-1 animate-spin"
-                                />
-                              ) : (
-                                <ImageUp
-                                  height={16}
-                                  width={16}
-                                  className="mr-1"
-                                />
-                              )}
-                              Upload image
-                            </label>
-                            <input
-                              id="file-input"
-                              type="file"
-                              accept="image/*"
-                              className="hidden"
-                              onChange={handleUpload}
-                              disabled={uploadStatus === "pending"}
-                            />
 
-                            {uploadStatus === "success" && (
-                              <button
-                                onClick={() => {
-                                  copy(UPLOADED_IMAGE_URL);
-                                  setCopied(true);
-                                }}
-                                type="button"
-                                className="relative flex w-full flex-1 overflow-x-hidden rounded-md border border-neutral-500 font-medium text-neutral-500 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:bg-neutral-50 disabled:opacity-50 dark:border-neutral-600 dark:text-neutral-600 hover:dark:bg-neutral-800 hover:dark:text-neutral-400"
-                              >
-                                <div className="flex flex-nowrap items-center text-nowrap p-2 text-sm">
-                                  {UPLOADED_IMAGE_URL}
-                                </div>
-                                <div className="absolute bottom-0 right-0 top-0 w-[100px] rounded-r-md border-l border-neutral-500 bg-white px-4 py-2 text-sm font-medium text-neutral-600 dark:border-l-0 dark:bg-neutral-600 dark:text-white">
-                                  {copied ? "Copied" : "Copy Link"}
-                                </div>
-                              </button>
-                            )}
-                          </div>
-                          <div className="flex flex-col">
-                            <label htmlFor="article-title" className="sr-only">
-                              Article title
-                            </label>
+                      {/* Draft preview link */}
+                      {postId && (
+                        <div>
+                          <label className="mb-1 block text-sm font-medium text-neutral-800 dark:text-white">
+                            Draft Preview Link
+                          </label>
+                          <div className="flex gap-2">
                             <input
-                              className="border-none bg-white text-2xl leading-5 placeholder:text-neutral-400 focus:bg-neutral-200 focus:ring-0 dark:bg-neutral-900 placeholder:dark:text-neutral-700 focus:dark:bg-black"
-                              placeholder="Article title"
                               type="text"
-                              id="article-title"
-                              {...register("title")}
+                              readOnly
+                              value={PREVIEW_URL}
+                              className="flex-1 rounded-lg border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm text-neutral-600 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
                             />
-
-                            <label
-                              htmlFor="article-content"
-                              className="sr-only"
+                            <button
+                              onClick={handleCopyToClipboard}
+                              type="button"
+                              className="rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
                             >
-                              Enter Article Content
-                            </label>
-                            <CustomTextareaAutosize
-                              placeholder="Enter your content here 💖"
-                              className="mb-8 border-none bg-white text-lg shadow-none outline-none placeholder:text-neutral-400 focus:bg-neutral-200 focus:ring-0 dark:bg-neutral-900 placeholder:dark:text-neutral-700 dark:focus:bg-black"
-                              minRows={25}
-                              id="article-content"
-                              {...register("body")}
-                              ref={(node: HTMLTextAreaElement | null) => {
-                                // Merge refs: update textareaRef for hotkeys/shortcuts
-                                textareaRef.current = node;
-                                // Also call the register ref
-                                register("body").ref(node);
-                              }}
-                            />
+                              {copied ? "Copied!" : "Copy"}
+                            </button>
                           </div>
+                          <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                            Share this link with others to preview your draft.
+                          </p>
                         </div>
                       )}
                     </div>
-                  </div>
-                  {/* End main area */}
-                </div>
-              </div>
-            </div>
-            <div className="pr-4 sm:pr-6 lg:flex-shrink-0 lg:pr-8 xl:pr-0">
-              <div className="h-full py-6 pl-4 sm:pl-6 lg:w-80 xl:pl-4">
-                {/* Start right column area */}
-                <div className="bg-white p-6 text-neutral-600 shadow dark:bg-neutral-900">
-                  <h3 className="text-xl font-semibold tracking-tight text-neutral-800 dark:text-white">
-                    How to use the editor
-                  </h3>
-                  <p className="mt-1 text-neutral-600 dark:text-neutral-400">
-                    You can edit and format the main content of your article
-                    using Markdown. If you have never used Markdown, you can
-                    check out{" "}
-                    <a
-                      href="https://www.markdownguide.org/"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
-                    >
-                      this
-                    </a>{" "}
-                    free guide on{" "}
-                    <a
-                      href="https://www.markdownguide.org/"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
-                    >
-                      markdownguide
-                    </a>
-                    .
-                  </p>
-                </div>
-                {/* End right column area */}
-              </div>
-            </div>
+                  </DisclosurePanel>
+                </>
+              )}
+            </Disclosure>
+          )}
+
+          {/* Action Bar */}
+          <div className="flex items-center justify-end gap-3 border-t border-neutral-200 px-4 py-3 dark:border-neutral-700">
+            {activeTab === "write" && (
+              <button
+                type="button"
+                onClick={async () => {
+                  if (isDisabled) return;
+                  await savePost();
+                  toast.success("Draft saved!");
+                }}
+                disabled={!unsavedChanges || isDisabled}
+                className={`rounded-lg border px-4 py-2 text-sm font-medium transition-colors ${
+                  unsavedChanges && !isDisabled
+                    ? "border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
+                    : "cursor-not-allowed border-neutral-200 bg-neutral-100 text-neutral-400 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-500"
+                }`}
+              >
+                {unsavedChanges ? "Save Draft" : "Saved"}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={handlePublish}
+              disabled={isDisabled}
+              className="rounded-lg bg-pink-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-pink-600 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {currentPostStatus === status.PUBLISHED
+                ? "Save Changes"
+                : "Publish"}
+            </button>
           </div>
-        </>
-      </form>
+        </div>
+      </div>
     </>
   );
 };
 
+// Wrapper component with Suspense for useSearchParams
+const Create = ({ session }: { session: Session | null }) => {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex h-screen items-center justify-center">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-pink-600 border-t-transparent" />
+        </div>
+      }
+    >
+      <CreateContent session={session} />
+    </Suspense>
+  );
+};
+
 export default Create;
diff --git a/app/(editor)/create/[[...paramsArr]]/navigation.tsx b/app/(editor)/create/[[...paramsArr]]/navigation.tsx
index 5d01f230..98c7020c 100644
--- a/app/(editor)/create/[[...paramsArr]]/navigation.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/navigation.tsx
@@ -17,6 +17,8 @@ type EditorNavProps = {
   unsavedChanges: boolean;
   onPublish: () => void;
   isDisabled: boolean;
+  savedTime?: string;
+  isSaving?: boolean;
 };
 
 const EditorNav = ({
@@ -26,6 +28,8 @@ const EditorNav = ({
   unsavedChanges,
   onPublish,
   isDisabled,
+  savedTime,
+  isSaving,
 }: EditorNavProps) => {
   const { data: count } = api.notification.getCount.useQuery(undefined, {
     enabled: !!session,
@@ -82,6 +86,11 @@ const EditorNav = ({
           </div>
 
           <div className="flex items-center space-x-4">
+            {savedTime && (
+              <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                {isSaving ? "Saving..." : `Saved ${savedTime}`}
+              </span>
+            )}
             <button
               onClick={onPublish}
               disabled={isDisabled}
diff --git a/components/PostEditor/PostEditor.tsx b/components/PostEditor/PostEditor.tsx
new file mode 100644
index 00000000..b34ade27
--- /dev/null
+++ b/components/PostEditor/PostEditor.tsx
@@ -0,0 +1,293 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { WriteTab } from "./tabs/WriteTab";
+import { LinkTab } from "./tabs/LinkTab";
+import { TagInput } from "./components/TagInput";
+import type { LinkMetadata } from "./hooks/useLinkMetadata";
+import { PenLine, Link as LinkIcon } from "lucide-react";
+
+export type PostType = "write" | "link";
+
+interface PostEditorProps {
+  /** Initial content for the Write tab */
+  initialContent?: string;
+  /** Initial title */
+  initialTitle?: string;
+  /** Initial tags */
+  initialTags?: string[];
+  /** Initial URL for Link tab */
+  initialUrl?: string;
+  /** Initial post type/tab */
+  initialTab?: PostType;
+  /** Callback when content changes */
+  onContentChange?: (data: PostEditorData) => void;
+  /** Callback when save/publish is requested */
+  onSave?: (data: PostEditorData) => void;
+  /** Callback when publish is requested */
+  onPublish?: (data: PostEditorData) => void;
+  /** Whether the editor is in loading state */
+  isLoading?: boolean;
+  /** Whether save is in progress */
+  isSaving?: boolean;
+  /** Last saved time string */
+  lastSaved?: string;
+  /** Show tags input */
+  showTags?: boolean;
+  /** Additional class name */
+  className?: string;
+}
+
+export interface PostEditorData {
+  type: PostType;
+  title: string;
+  body: string;
+  tags: string[];
+  // Link-specific fields
+  externalUrl?: string;
+  coverImage?: string | null;
+  excerpt?: string | null;
+  readTime?: number | null;
+}
+
+const TAB_CONFIG = [
+  {
+    id: "write" as const,
+    label: "Write",
+    icon: PenLine,
+    description: "Write an article with rich text or markdown",
+  },
+  {
+    id: "link" as const,
+    label: "Link",
+    icon: LinkIcon,
+    description: "Share an external link with the community",
+  },
+];
+
+export function PostEditor({
+  initialContent = "",
+  initialTitle = "",
+  initialTags = [],
+  initialUrl = "",
+  initialTab = "write",
+  onContentChange,
+  onSave,
+  onPublish,
+  isLoading = false,
+  isSaving = false,
+  lastSaved,
+  showTags = true,
+  className = "",
+}: PostEditorProps) {
+  // State
+  const [activeTab, setActiveTab] = useState<PostType>(initialTab);
+  const [title, setTitle] = useState(initialTitle);
+  const [body, setBody] = useState(initialContent);
+  const [tags, setTags] = useState<string[]>(initialTags);
+
+  // Link tab state
+  const [linkUrl, setLinkUrl] = useState(initialUrl);
+  const [linkTitle, setLinkTitle] = useState("");
+  const [linkMetadata, setLinkMetadata] = useState<LinkMetadata | null>(null);
+
+  // Build current data object
+  const getCurrentData = useCallback((): PostEditorData => {
+    if (activeTab === "link") {
+      return {
+        type: "link",
+        title: linkTitle || title,
+        body: "", // Links don't have body content
+        tags,
+        externalUrl: linkUrl,
+        coverImage: linkMetadata?.image,
+        excerpt: linkMetadata?.description,
+        readTime: linkMetadata?.readTime,
+      };
+    }
+
+    return {
+      type: "write",
+      title,
+      body,
+      tags,
+    };
+  }, [activeTab, title, body, tags, linkUrl, linkTitle, linkMetadata]);
+
+  // Handlers
+  const handleTitleChange = useCallback(
+    (newTitle: string) => {
+      setTitle(newTitle);
+      onContentChange?.(getCurrentData());
+    },
+    [onContentChange, getCurrentData],
+  );
+
+  const handleBodyChange = useCallback(
+    (newBody: string) => {
+      setBody(newBody);
+      onContentChange?.(getCurrentData());
+    },
+    [onContentChange, getCurrentData],
+  );
+
+  const handleTagsChange = useCallback(
+    (newTags: string[]) => {
+      setTags(newTags);
+      onContentChange?.(getCurrentData());
+    },
+    [onContentChange, getCurrentData],
+  );
+
+  const handleLinkUrlChange = useCallback(
+    (url: string) => {
+      setLinkUrl(url);
+      onContentChange?.(getCurrentData());
+    },
+    [onContentChange, getCurrentData],
+  );
+
+  const handleLinkTitleChange = useCallback(
+    (newTitle: string) => {
+      setLinkTitle(newTitle);
+      onContentChange?.(getCurrentData());
+    },
+    [onContentChange, getCurrentData],
+  );
+
+  const handleMetadataFetched = useCallback((metadata: LinkMetadata) => {
+    setLinkMetadata(metadata);
+  }, []);
+
+  const handleSave = useCallback(() => {
+    onSave?.(getCurrentData());
+  }, [onSave, getCurrentData]);
+
+  const handlePublish = useCallback(() => {
+    onPublish?.(getCurrentData());
+  }, [onPublish, getCurrentData]);
+
+  // Check if form is valid for the current tab
+  const isValid =
+    activeTab === "write"
+      ? title.trim().length > 0
+      : linkUrl.trim().length > 0 && linkTitle.trim().length > 0;
+
+  if (isLoading) {
+    return (
+      <div
+        className={`flex min-h-[600px] items-center justify-center ${className}`}
+      >
+        <div className="flex flex-col items-center gap-3 text-neutral-500 dark:text-neutral-400">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-pink-600 border-t-transparent" />
+          <span>Loading editor...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`flex min-h-[600px] flex-col overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-900 ${className}`}
+    >
+      {/* Tab Bar */}
+      <div className="flex items-center border-b border-neutral-200 dark:border-neutral-700">
+        <div className="flex">
+          {TAB_CONFIG.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = activeTab === tab.id;
+
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => setActiveTab(tab.id)}
+                className={`relative flex items-center gap-2 px-5 py-3.5 text-sm font-medium transition-colors ${
+                  isActive
+                    ? "text-pink-600 dark:text-pink-500"
+                    : "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white"
+                }`}
+                title={tab.description}
+              >
+                <Icon className="h-4 w-4" />
+                {tab.label}
+                {/* Active indicator */}
+                {isActive && (
+                  <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-pink-600 dark:bg-pink-500" />
+                )}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Save status */}
+        <div className="ml-auto flex items-center gap-4 px-4">
+          {lastSaved && (
+            <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              {isSaving ? "Saving..." : `Saved ${lastSaved}`}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        {activeTab === "write" ? (
+          <WriteTab
+            initialContent={initialContent}
+            title={title}
+            onTitleChange={handleTitleChange}
+            onBodyChange={handleBodyChange}
+            className="flex-1"
+          />
+        ) : (
+          <LinkTab
+            url={linkUrl}
+            onUrlChange={handleLinkUrlChange}
+            title={linkTitle}
+            onTitleChange={handleLinkTitleChange}
+            onMetadataFetched={handleMetadataFetched}
+            className="flex-1"
+          />
+        )}
+
+        {/* Tags (shared between tabs) */}
+        {showTags && (
+          <div className="border-t border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
+            <TagInput
+              tags={tags}
+              onChange={handleTagsChange}
+              maxTags={5}
+              label="Tags"
+              helpText="Add up to 5 tags to help readers find your post."
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Action Bar */}
+      <div className="flex items-center justify-end gap-3 border-t border-neutral-200 bg-neutral-50 px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800/50">
+        {onSave && (
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={isSaving}
+            className="rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-600"
+          >
+            {isSaving ? "Saving..." : "Save Draft"}
+          </button>
+        )}
+        {onPublish && (
+          <button
+            type="button"
+            onClick={handlePublish}
+            disabled={!isValid || isSaving}
+            className="rounded-lg bg-pink-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-pink-600 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {activeTab === "link" ? "Share Link" : "Publish"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/PostEditor/components/TagInput.tsx b/components/PostEditor/components/TagInput.tsx
new file mode 100644
index 00000000..16f2ac83
--- /dev/null
+++ b/components/PostEditor/components/TagInput.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+import {
+  useState,
+  useCallback,
+  type KeyboardEvent,
+  type ChangeEvent,
+} from "react";
+import { X, Tag as TagIcon } from "lucide-react";
+
+interface TagInputProps {
+  /** Current tags */
+  tags: string[];
+  /** Callback when tags change */
+  onChange: (tags: string[]) => void;
+  /** Maximum number of tags allowed */
+  maxTags?: number;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Error message to display */
+  error?: string;
+  /** Label text */
+  label?: string;
+  /** Help text */
+  helpText?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional class name */
+  className?: string;
+}
+
+export function TagInput({
+  tags,
+  onChange,
+  maxTags = 5,
+  placeholder = "Add tags (press Enter or comma)",
+  error,
+  label = "Topics",
+  helpText = "Tag with up to 5 topics. This makes it easier for readers to find and know what your story is about.",
+  disabled = false,
+  className = "",
+}: TagInputProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const addTag = useCallback(
+    (tag: string) => {
+      const trimmedTag = tag.trim().toLowerCase();
+
+      // Validate tag
+      if (!trimmedTag) return;
+      if (tags.includes(trimmedTag)) return;
+      if (tags.length >= maxTags) return;
+
+      // Add tag
+      onChange([...tags, trimmedTag]);
+      setInputValue("");
+    },
+    [tags, maxTags, onChange],
+  );
+
+  const removeTag = useCallback(
+    (tagToRemove: string) => {
+      onChange(tags.filter((tag) => tag !== tagToRemove));
+    },
+    [tags, onChange],
+  );
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+
+    // Check for comma to add tag
+    if (value.includes(",")) {
+      const parts = value.split(",");
+      parts.forEach((part, index) => {
+        if (index < parts.length - 1) {
+          // Add all parts except the last one (which might be empty or partial)
+          addTag(part);
+        } else {
+          // Keep the last part in the input
+          setInputValue(part);
+        }
+      });
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addTag(inputValue);
+    } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+      // Remove last tag on backspace when input is empty
+      removeTag(tags[tags.length - 1]);
+    }
+  };
+
+  const isMaxReached = tags.length >= maxTags;
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+          {label}
+        </label>
+      )}
+
+      <div
+        className={`flex flex-wrap items-center gap-2 rounded-lg border bg-white p-2 transition-colors focus-within:border-pink-500 focus-within:ring-2 focus-within:ring-pink-500/20 dark:bg-neutral-800 ${
+          error
+            ? "border-red-500 dark:border-red-500"
+            : "border-neutral-300 dark:border-neutral-600"
+        } ${disabled ? "opacity-50" : ""}`}
+      >
+        {/* Existing Tags */}
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="inline-flex items-center gap-1 rounded-full bg-neutral-100 px-3 py-1 text-sm font-medium text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200"
+          >
+            <TagIcon className="h-3 w-3" />
+            {tag}
+            <button
+              type="button"
+              onClick={() => removeTag(tag)}
+              disabled={disabled}
+              className="ml-1 rounded-full p-0.5 text-neutral-500 transition-colors hover:bg-neutral-200 hover:text-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-600 dark:hover:text-neutral-200"
+              aria-label={`Remove ${tag} tag`}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </span>
+        ))}
+
+        {/* Input */}
+        {!isMaxReached && (
+          <input
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            placeholder={tags.length === 0 ? placeholder : "Add more..."}
+            disabled={disabled}
+            className="min-w-[120px] flex-1 border-none bg-transparent px-1 py-1 text-sm text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-0 dark:text-white dark:placeholder:text-neutral-500"
+          />
+        )}
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+
+      {/* Help Text / Counter */}
+      <div className="mt-1.5 flex items-center justify-between">
+        {helpText && (
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            {helpText}
+          </p>
+        )}
+        <span
+          className={`text-sm ${
+            isMaxReached
+              ? "text-amber-600 dark:text-amber-400"
+              : "text-neutral-400 dark:text-neutral-500"
+          }`}
+        >
+          {tags.length}/{maxTags}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/components/PostEditor/components/UrlMetadataPreview.tsx b/components/PostEditor/components/UrlMetadataPreview.tsx
new file mode 100644
index 00000000..ac9591f4
--- /dev/null
+++ b/components/PostEditor/components/UrlMetadataPreview.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import type { LinkMetadata } from "../hooks/useLinkMetadata";
+import { Loader2, AlertCircle, Clock, ExternalLink } from "lucide-react";
+
+interface UrlMetadataPreviewProps {
+  /** Metadata to display */
+  metadata: LinkMetadata | null;
+  /** Whether metadata is being loaded */
+  isLoading: boolean;
+  /** Error message if fetch failed */
+  error: string | null;
+  /** The URL being previewed */
+  url: string;
+  /** Callback to retry fetching */
+  onRetry?: () => void;
+}
+
+export function UrlMetadataPreview({
+  metadata,
+  isLoading,
+  error,
+  url,
+  onRetry,
+}: UrlMetadataPreviewProps) {
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 p-6 dark:border-neutral-700 dark:bg-neutral-800">
+        <div className="flex items-center gap-3 text-neutral-500 dark:text-neutral-400">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          <span>Fetching link preview...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-900/20">
+        <div className="flex items-start gap-3">
+          <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-500" />
+          <div className="flex-1">
+            <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+              Could not fetch link preview
+            </p>
+            <p className="mt-1 text-sm text-amber-700 dark:text-amber-300">
+              {error}
+            </p>
+            {onRetry && (
+              <button
+                type="button"
+                onClick={onRetry}
+                className="mt-2 text-sm font-medium text-amber-700 underline hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300"
+              >
+                Try again
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // No metadata yet (URL might be invalid or empty)
+  if (!metadata) {
+    return null;
+  }
+
+  // Extract domain from URL
+  let domain = "";
+  try {
+    domain = new URL(url).hostname.replace("www.", "");
+  } catch {
+    // Ignore invalid URL
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800">
+      {/* Cover Image */}
+      {metadata.image && (
+        <div className="relative aspect-video w-full overflow-hidden bg-neutral-100 dark:bg-neutral-900">
+          { }
+          <img
+            src={metadata.image}
+            alt={metadata.title || "Link preview"}
+            className="h-full w-full object-cover"
+            onError={(e) => {
+              // Hide image on error
+              e.currentTarget.style.display = "none";
+            }}
+          />
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="p-4">
+        {/* Site name / Domain */}
+        <div className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400">
+          <ExternalLink className="h-3.5 w-3.5" />
+          <span>{metadata.siteName || domain}</span>
+          {metadata.readTime && (
+            <>
+              <span className="text-neutral-300 dark:text-neutral-600">•</span>
+              <span className="flex items-center gap-1">
+                <Clock className="h-3.5 w-3.5" />
+                {metadata.readTime} min read
+              </span>
+            </>
+          )}
+        </div>
+
+        {/* Title */}
+        {metadata.title && (
+          <h3 className="mt-2 text-lg font-semibold text-neutral-900 dark:text-white">
+            {metadata.title}
+          </h3>
+        )}
+
+        {/* Description */}
+        {metadata.description && (
+          <p className="mt-2 line-clamp-3 text-sm text-neutral-600 dark:text-neutral-300">
+            {metadata.description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/PostEditor/extensions/index.ts b/components/PostEditor/extensions/index.ts
new file mode 100644
index 00000000..4701a912
--- /dev/null
+++ b/components/PostEditor/extensions/index.ts
@@ -0,0 +1,181 @@
+import StarterKit from "@tiptap/starter-kit";
+import Heading from "@tiptap/extension-heading";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Link from "@tiptap/extension-link";
+import Superscript from "@tiptap/extension-superscript";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import Youtube from "@tiptap/extension-youtube";
+import { Markdown } from "tiptap-markdown";
+import { InputRule } from "@tiptap/core";
+import { common, createLowlight } from "lowlight";
+
+// Create lowlight instance with common languages
+const lowlight = createLowlight(common);
+
+// Highlight.js styles imported in global CSS
+
+/**
+ * TipTap extensions configured for article/post editing.
+ * Extends the discussion editor with headings, images, code highlighting, and YouTube embeds.
+ */
+export const getArticleExtensions = (
+  placeholder: string = "Start writing your article...",
+) => [
+  StarterKit.configure({
+    // Disable built-in heading - we use custom one for more control
+    heading: false,
+    // Disable built-in horizontal rule - we use custom one
+    horizontalRule: false,
+    // Disable built-in code block - we use CodeBlockLowlight for syntax highlighting
+    codeBlock: false,
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc list-outside ml-6 my-4",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal list-outside ml-6 my-4",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "leading-normal my-1",
+      },
+    },
+    blockquote: {
+      HTMLAttributes: {
+        class:
+          "border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 my-4 italic text-neutral-600 dark:text-neutral-400",
+      },
+    },
+    code: {
+      HTMLAttributes: {
+        class:
+          "rounded bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 font-mono text-sm text-neutral-800 dark:text-neutral-200",
+      },
+    },
+    dropcursor: {
+      color: "#DBEAFE",
+      width: 4,
+    },
+    gapcursor: false,
+  }),
+
+  // Headings H1-H3 for article structure
+  Heading.configure({
+    levels: [1, 2, 3],
+    HTMLAttributes: {
+      class: "font-bold",
+    },
+  }).extend({
+    // Custom rendering for different heading levels
+    renderHTML({ node, HTMLAttributes }) {
+      const level = node.attrs.level;
+      const classes: Record<number, string> = {
+        1: "text-3xl font-bold mt-8 mb-4",
+        2: "text-2xl font-bold mt-6 mb-3",
+        3: "text-xl font-semibold mt-4 mb-2",
+      };
+      return [
+        `h${level}`,
+        { ...HTMLAttributes, class: classes[level] || "" },
+        0,
+      ];
+    },
+  }),
+
+  // Horizontal rule with custom input rules
+  HorizontalRule.extend({
+    addInputRules() {
+      return [
+        new InputRule({
+          find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+          handler: ({ state, range }) => {
+            const { tr } = state;
+            const start = range.from;
+            const end = range.to;
+            tr.insert(start - 1, this.type.create({})).delete(
+              tr.mapping.map(start),
+              tr.mapping.map(end),
+            );
+          },
+        }),
+      ];
+    },
+  }).configure({
+    HTMLAttributes: {
+      class: "my-8 border-t border-neutral-200 dark:border-neutral-700",
+    },
+  }),
+
+  // Links with styling
+  Link.configure({
+    openOnClick: false,
+    HTMLAttributes: {
+      class:
+        "text-pink-600 dark:text-pink-500 underline underline-offset-2 hover:text-pink-700 dark:hover:text-pink-400 cursor-pointer transition-colors",
+    },
+  }),
+
+  // Superscript for footnotes, etc.
+  Superscript,
+
+  // Image extension (basic - upload handling done separately)
+  Image.extend({
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: { default: null },
+        height: { default: null },
+        alt: { default: "" },
+      };
+    },
+  }).configure({
+    HTMLAttributes: {
+      class: "rounded-lg max-w-full my-4",
+    },
+    allowBase64: true,
+  }),
+
+  // Code blocks with syntax highlighting
+  CodeBlockLowlight.configure({
+    lowlight,
+    HTMLAttributes: {
+      class:
+        "rounded-lg bg-neutral-900 dark:bg-neutral-950 p-4 font-mono text-sm overflow-x-auto my-4",
+    },
+  }),
+
+  // YouTube embeds
+  Youtube.configure({
+    width: 640,
+    height: 360,
+    allowFullscreen: true,
+    HTMLAttributes: {
+      class: "rounded-lg my-4 aspect-video w-full",
+    },
+  }),
+
+  // Placeholder text
+  Placeholder.configure({
+    placeholder: ({ editor }) => {
+      const isEmpty = editor.state.doc.textContent.length === 0;
+      return isEmpty ? placeholder : "";
+    },
+    showOnlyWhenEditable: true,
+    emptyEditorClass:
+      "before:content-[attr(data-placeholder)] before:text-neutral-400 dark:before:text-neutral-500 before:float-left before:h-0 before:pointer-events-none",
+  }),
+
+  // Markdown support for copy/paste and conversion
+  Markdown.configure({
+    html: false,
+    transformCopiedText: true,
+    transformPastedText: true,
+  }),
+];
+
+export type ArticleEditorExtensions = ReturnType<typeof getArticleExtensions>;
diff --git a/components/PostEditor/extensions/s3-image-upload.ts b/components/PostEditor/extensions/s3-image-upload.ts
new file mode 100644
index 00000000..e9eec670
--- /dev/null
+++ b/components/PostEditor/extensions/s3-image-upload.ts
@@ -0,0 +1,276 @@
+import { toast } from "sonner";
+import type { EditorState } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import type { EditorView } from "@tiptap/pm/view";
+import { getUploadUrl } from "@/app/actions/getUploadUrl";
+import { uploadFile } from "@/utils/s3helpers";
+
+const ACCEPTED_IMAGE_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+];
+const MAX_FILE_SIZE_MB = 10;
+const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
+
+const uploadKey = new PluginKey<DecorationSet>("s3-upload-image");
+
+/**
+ * ProseMirror plugin for handling image uploads with placeholder decorations.
+ * Shows a preview while uploading, then replaces with the final image.
+ */
+export const S3ImageUploadPlugin = () =>
+  new Plugin({
+    key: uploadKey as unknown as PluginKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, set) {
+        // Map decorations to account for document changes
+        set = set.map(tr.mapping, tr.doc);
+
+        // Handle add/remove placeholder actions
+         
+        const action = tr.getMeta(uploadKey as any);
+        if (action?.add) {
+          const { id, pos, src } = action.add;
+
+          // Create placeholder element with preview
+          const placeholder = document.createElement("div");
+          placeholder.setAttribute("class", "img-upload-placeholder relative");
+
+          const wrapper = document.createElement("div");
+          wrapper.setAttribute(
+            "class",
+            "relative rounded-lg overflow-hidden my-4",
+          );
+
+          const image = document.createElement("img");
+          image.setAttribute(
+            "class",
+            "opacity-40 rounded-lg border border-neutral-200 dark:border-neutral-700 max-w-full",
+          );
+          image.src = src;
+
+          const loadingOverlay = document.createElement("div");
+          loadingOverlay.setAttribute(
+            "class",
+            "absolute inset-0 flex items-center justify-center bg-black/20 rounded-lg",
+          );
+          loadingOverlay.innerHTML = `
+            <div class="flex items-center gap-2 bg-white dark:bg-neutral-800 px-3 py-2 rounded-full shadow-lg">
+              <svg class="animate-spin h-4 w-4 text-pink-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">Uploading...</span>
+            </div>
+          `;
+
+          wrapper.appendChild(image);
+          wrapper.appendChild(loadingOverlay);
+          placeholder.appendChild(wrapper);
+
+          const deco = Decoration.widget(pos + 1, placeholder, { id });
+          set = set.add(tr.doc, [deco]);
+        } else if (action?.remove) {
+          set = set.remove(
+            set.find(
+              undefined,
+              undefined,
+              (spec) => spec.id === action.remove.id,
+            ),
+          );
+        }
+        return set;
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+
+/**
+ * Find the position of a placeholder decoration by ID
+ */
+function findPlaceholder(state: EditorState, id: object): number | null {
+  const decos = uploadKey.getState(state);
+  if (!decos) return null;
+
+  const found = decos.find(
+    undefined,
+    undefined,
+    (spec: { id: object }) => spec.id === id,
+  );
+  return found.length ? found[0].from : null;
+}
+
+/**
+ * Validate an image file before upload
+ */
+function validateImageFile(file: File): string | null {
+  if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+    return `Invalid file type. Accepted formats: JPG, PNG, GIF, WebP`;
+  }
+  if (file.size > MAX_FILE_SIZE_BYTES) {
+    return `File too large. Maximum size is ${MAX_FILE_SIZE_MB}MB`;
+  }
+  return null;
+}
+
+/**
+ * Upload an image file to S3 using presigned URL
+ */
+async function uploadImageToS3(file: File): Promise<string> {
+  const result = await getUploadUrl({
+    type: file.type,
+    size: file.size,
+    uploadType: "uploads",
+  });
+
+  if (result?.serverError) {
+    throw new Error(result.serverError);
+  }
+
+  const signedUrl = result?.data;
+  if (!signedUrl) {
+    throw new Error("Failed to get upload URL");
+  }
+
+  const uploadResult = await uploadFile(signedUrl, file);
+
+  if (!uploadResult.ok) {
+    throw new Error("Failed to upload image");
+  }
+
+  return uploadResult.fileLocation;
+}
+
+/**
+ * Start uploading an image file with placeholder decoration
+ */
+export function startImageUpload(file: File, view: EditorView, pos: number) {
+  // Validate file
+  const validationError = validateImageFile(file);
+  if (validationError) {
+    toast.error(validationError);
+    return;
+  }
+
+  // Create unique ID for this upload
+  const id = {};
+
+  // Delete selection if any
+  const tr = view.state.tr;
+  if (!tr.selection.empty) tr.deleteSelection();
+
+  // Read file for preview and add placeholder
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    tr.setMeta(uploadKey, {
+      add: {
+        id,
+        pos,
+        src: reader.result,
+      },
+    });
+    view.dispatch(tr);
+  };
+
+  // Upload to S3
+  toast.promise(
+    uploadImageToS3(file).then((imageUrl) => {
+      const { schema } = view.state;
+      const placeholderPos = findPlaceholder(view.state, id);
+
+      // If placeholder was deleted, don't insert image
+      if (placeholderPos === null) return;
+
+      // Insert image node and remove placeholder
+      const node = schema.nodes.image.create({ src: imageUrl });
+      const transaction = view.state.tr
+        .replaceWith(placeholderPos, placeholderPos, node)
+        .setMeta(uploadKey, { remove: { id } });
+      view.dispatch(transaction);
+
+      return imageUrl;
+    }),
+    {
+      loading: "Uploading image...",
+      success: "Image uploaded successfully",
+      error: (e) => e.message || "Failed to upload image",
+    },
+  );
+}
+
+/**
+ * Handle file drop event on the editor
+ */
+export function handleImageDrop(
+  view: EditorView,
+  event: DragEvent,
+  _slice: unknown,
+  moved: boolean,
+): boolean {
+  if (moved || !event.dataTransfer?.files.length) {
+    return false;
+  }
+
+  const file = event.dataTransfer.files[0];
+  if (!file || !ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+    return false;
+  }
+
+  event.preventDefault();
+
+  const coordinates = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY,
+  });
+
+  if (coordinates) {
+    startImageUpload(file, view, coordinates.pos);
+  }
+
+  return true;
+}
+
+/**
+ * Handle paste event with images
+ */
+export function handleImagePaste(
+  view: EditorView,
+  event: ClipboardEvent,
+): boolean {
+  const items = event.clipboardData?.items;
+  if (!items) return false;
+
+  for (const item of items) {
+    if (ACCEPTED_IMAGE_TYPES.includes(item.type)) {
+      const file = item.getAsFile();
+      if (file) {
+        event.preventDefault();
+        const { from } = view.state.selection;
+        startImageUpload(file, view, from);
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Trigger image upload from a file input
+ */
+export function triggerImageUpload(view: EditorView, file: File) {
+  const { from } = view.state.selection;
+  startImageUpload(file, view, from);
+}
diff --git a/components/PostEditor/hooks/useArticleEditor.ts b/components/PostEditor/hooks/useArticleEditor.ts
new file mode 100644
index 00000000..64031186
--- /dev/null
+++ b/components/PostEditor/hooks/useArticleEditor.ts
@@ -0,0 +1,202 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useEditor, type Editor } from "@tiptap/react";
+import { getArticleExtensions } from "../extensions";
+import {
+  S3ImageUploadPlugin,
+  handleImageDrop,
+  handleImagePaste,
+  triggerImageUpload,
+} from "../extensions/s3-image-upload";
+
+export type EditorMode = "rich" | "markdown";
+
+interface UseArticleEditorOptions {
+  /** Initial markdown content to load */
+  initialContent?: string;
+  /** Placeholder text for empty editor */
+  placeholder?: string;
+  /** Callback when content changes (debounced) */
+  onContentChange?: (markdown: string) => void;
+  /** Debounce delay in ms for content change callback */
+  debounceMs?: number;
+}
+
+interface UseArticleEditorReturn {
+  /** TipTap editor instance */
+  editor: Editor | null;
+  /** Current editor mode */
+  mode: EditorMode;
+  /** Markdown content (for markdown mode) */
+  markdownContent: string;
+  /** Set markdown content directly */
+  setMarkdownContent: (content: string) => void;
+  /** Toggle between rich and markdown modes */
+  toggleMode: () => void;
+  /** Get current content as markdown */
+  getMarkdown: () => string;
+  /** Check if editor is empty */
+  isEmpty: () => boolean;
+  /** Clear editor content */
+  clearContent: () => void;
+  /** Set content from markdown */
+  setContent: (markdown: string) => void;
+  /** Trigger image upload from file input */
+  uploadImage: (file: File) => void;
+}
+
+export function useArticleEditor({
+  initialContent = "",
+  placeholder = "Start writing your article...",
+  onContentChange,
+  debounceMs = 1500,
+}: UseArticleEditorOptions = {}): UseArticleEditorReturn {
+  const [mode, setMode] = useState<EditorMode>("rich");
+  const [markdownContent, setMarkdownContent] = useState(initialContent);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const lastContentRef = useRef<string>(initialContent);
+
+  const editor = useEditor({
+    extensions: getArticleExtensions(placeholder),
+    content: initialContent,
+    editorProps: {
+      attributes: {
+        class:
+          "prose prose-neutral dark:prose-invert max-w-none focus:outline-none min-h-[300px] px-4 pt-2 pb-3 !mt-0 [&>*:first-child]:mt-0",
+      },
+      handleDrop: handleImageDrop,
+      handlePaste: (view, event) => {
+        // First try to handle image paste
+        if (handleImagePaste(view, event)) {
+          return true;
+        }
+        // Let TipTap handle other paste events (including markdown)
+        return false;
+      },
+    },
+    immediatelyRender: false,
+    onCreate: ({ editor }) => {
+      // Register the upload plugin
+      editor.registerPlugin(S3ImageUploadPlugin());
+    },
+    onUpdate: ({ editor }) => {
+      // Debounced content change callback
+      if (onContentChange && mode === "rich") {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+          const markdown =
+            editor.storage.markdown?.getMarkdown() || editor.getText();
+          if (markdown !== lastContentRef.current) {
+            lastContentRef.current = markdown;
+            onContentChange(markdown);
+          }
+        }, debounceMs);
+      }
+    },
+  });
+
+  // Sync initial content when editor is ready
+  useEffect(() => {
+    if (editor && initialContent && !editor.getText().trim()) {
+      editor.commands.setContent(initialContent);
+      lastContentRef.current = initialContent;
+    }
+  }, [editor, initialContent]);
+
+  // Debounced markdown content change callback
+  useEffect(() => {
+    if (onContentChange && mode === "markdown") {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        if (markdownContent !== lastContentRef.current) {
+          lastContentRef.current = markdownContent;
+          onContentChange(markdownContent);
+        }
+      }, debounceMs);
+    }
+  }, [markdownContent, mode, onContentChange, debounceMs]);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  const toggleMode = useCallback(() => {
+    if (!editor) return;
+
+    if (mode === "rich") {
+      // Rich → Markdown: Extract markdown from TipTap
+      const markdown =
+        editor.storage.markdown?.getMarkdown() || editor.getText();
+      setMarkdownContent(markdown);
+      setMode("markdown");
+    } else {
+      // Markdown → Rich: Load markdown into TipTap
+      editor.commands.setContent(markdownContent);
+      setMode("rich");
+    }
+  }, [mode, editor, markdownContent]);
+
+  const getMarkdown = useCallback((): string => {
+    if (mode === "markdown") {
+      return markdownContent;
+    }
+    if (editor) {
+      return editor.storage.markdown?.getMarkdown() || editor.getText();
+    }
+    return "";
+  }, [mode, markdownContent, editor]);
+
+  const isEmpty = useCallback((): boolean => {
+    const content = getMarkdown().trim();
+    return content.length === 0;
+  }, [getMarkdown]);
+
+  const clearContent = useCallback(() => {
+    editor?.commands.clearContent();
+    setMarkdownContent("");
+    lastContentRef.current = "";
+  }, [editor]);
+
+  const setContent = useCallback(
+    (markdown: string) => {
+      setMarkdownContent(markdown);
+      lastContentRef.current = markdown;
+      if (editor && mode === "rich") {
+        editor.commands.setContent(markdown);
+      }
+    },
+    [editor, mode],
+  );
+
+  const uploadImage = useCallback(
+    (file: File) => {
+      if (editor) {
+        triggerImageUpload(editor.view, file);
+      }
+    },
+    [editor],
+  );
+
+  return {
+    editor,
+    mode,
+    markdownContent,
+    setMarkdownContent,
+    toggleMode,
+    getMarkdown,
+    isEmpty,
+    clearContent,
+    setContent,
+    uploadImage,
+  };
+}
diff --git a/components/PostEditor/hooks/useLinkMetadata.ts b/components/PostEditor/hooks/useLinkMetadata.ts
new file mode 100644
index 00000000..44c9e053
--- /dev/null
+++ b/components/PostEditor/hooks/useLinkMetadata.ts
@@ -0,0 +1,195 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+
+export interface LinkMetadata {
+  title: string | null;
+  description: string | null;
+  image: string | null;
+  readTime: number | null;
+  siteName: string | null;
+}
+
+interface UseLinkMetadataOptions {
+  /** Debounce delay in ms (default: 500) */
+  debounceMs?: number;
+  /** Callback when metadata is successfully fetched */
+  onSuccess?: (metadata: LinkMetadata) => void;
+  /** Callback when fetch fails */
+  onError?: (error: string) => void;
+}
+
+interface UseLinkMetadataReturn {
+  /** Current metadata (null if not fetched or error) */
+  metadata: LinkMetadata | null;
+  /** Whether metadata is currently being fetched */
+  isLoading: boolean;
+  /** Error message if fetch failed */
+  error: string | null;
+  /** Manually trigger a fetch for the current URL */
+  refetch: () => void;
+  /** Clear metadata and error state */
+  clear: () => void;
+}
+
+/**
+ * Validate if a string is a valid HTTP/HTTPS URL
+ */
+function isValidUrl(url: string): boolean {
+  if (!url || url.length < 10) return false;
+
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Hook for fetching metadata from a URL with debouncing
+ */
+export function useLinkMetadata(
+  url: string,
+  options: UseLinkMetadataOptions = {},
+): UseLinkMetadataReturn {
+  const { debounceMs = 500, onSuccess, onError } = options;
+
+  const [metadata, setMetadata] = useState<LinkMetadata | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const lastFetchedUrlRef = useRef<string>("");
+
+  const fetchMetadata = useCallback(
+    async (targetUrl: string) => {
+      // Skip if already fetched this URL
+      if (targetUrl === lastFetchedUrlRef.current && metadata) {
+        return;
+      }
+
+      // Cancel any in-progress fetch
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      // Skip invalid URLs
+      if (!isValidUrl(targetUrl)) {
+        setMetadata(null);
+        setError(null);
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
+      try {
+        const response = await fetch("/api/fetch-metadata", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ url: targetUrl }),
+          signal: controller.signal,
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || "Failed to fetch metadata");
+        }
+
+        const data: LinkMetadata = await response.json();
+        lastFetchedUrlRef.current = targetUrl;
+        setMetadata(data);
+        setError(null);
+        onSuccess?.(data);
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          // Request was aborted, ignore
+          return;
+        }
+
+        const errorMessage =
+          err instanceof Error ? err.message : "Failed to fetch metadata";
+        setError(errorMessage);
+        setMetadata(null);
+        onError?.(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [metadata, onSuccess, onError],
+  );
+
+  // Debounced effect for URL changes
+  useEffect(() => {
+    // Clear previous timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    // Skip empty or invalid URLs
+    if (!url || !isValidUrl(url)) {
+      // Clear state if URL is empty
+      if (!url) {
+        setMetadata(null);
+        setError(null);
+        lastFetchedUrlRef.current = "";
+      }
+      return;
+    }
+
+    // Debounce the fetch
+    debounceTimerRef.current = setTimeout(() => {
+      fetchMetadata(url);
+    }, debounceMs);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [url, debounceMs, fetchMetadata]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+
+  const refetch = useCallback(() => {
+    if (url && isValidUrl(url)) {
+      lastFetchedUrlRef.current = ""; // Force refetch
+      fetchMetadata(url);
+    }
+  }, [url, fetchMetadata]);
+
+  const clear = useCallback(() => {
+    setMetadata(null);
+    setError(null);
+    lastFetchedUrlRef.current = "";
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+
+  return {
+    metadata,
+    isLoading,
+    error,
+    refetch,
+    clear,
+  };
+}
diff --git a/components/PostEditor/index.ts b/components/PostEditor/index.ts
new file mode 100644
index 00000000..d394d71d
--- /dev/null
+++ b/components/PostEditor/index.ts
@@ -0,0 +1,22 @@
+// Main component
+export { PostEditor } from "./PostEditor";
+export type { PostEditorData, PostType } from "./PostEditor";
+
+// Tab components
+export { WriteTab } from "./tabs/WriteTab";
+export { LinkTab } from "./tabs/LinkTab";
+
+// Hooks
+export { useArticleEditor } from "./hooks/useArticleEditor";
+export type { EditorMode } from "./hooks/useArticleEditor";
+export { useLinkMetadata } from "./hooks/useLinkMetadata";
+export type { LinkMetadata } from "./hooks/useLinkMetadata";
+
+// Components
+export { TagInput } from "./components/TagInput";
+export { UrlMetadataPreview } from "./components/UrlMetadataPreview";
+export { ArticleToolbar } from "./toolbar/ArticleToolbar";
+
+// Extensions (for advanced usage)
+export { getArticleExtensions } from "./extensions";
+export type { ArticleEditorExtensions } from "./extensions";
diff --git a/components/PostEditor/tabs/LinkTab.tsx b/components/PostEditor/tabs/LinkTab.tsx
new file mode 100644
index 00000000..310b0b59
--- /dev/null
+++ b/components/PostEditor/tabs/LinkTab.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useEffect } from "react";
+import { useLinkMetadata, type LinkMetadata } from "../hooks/useLinkMetadata";
+import { UrlMetadataPreview } from "../components/UrlMetadataPreview";
+import { Link as LinkIcon } from "lucide-react";
+
+interface LinkTabProps {
+  /** Current URL value */
+  url: string;
+  /** Callback when URL changes */
+  onUrlChange: (url: string) => void;
+  /** Current title value */
+  title: string;
+  /** Callback when title changes */
+  onTitleChange: (title: string) => void;
+  /** Callback when metadata is fetched (to update parent state) */
+  onMetadataFetched?: (metadata: LinkMetadata) => void;
+  /** Placeholder for URL input */
+  urlPlaceholder?: string;
+  /** Placeholder for title input */
+  titlePlaceholder?: string;
+  /** Additional class name for container */
+  className?: string;
+}
+
+export function LinkTab({
+  url,
+  onUrlChange,
+  title,
+  onTitleChange,
+  onMetadataFetched,
+  urlPlaceholder = "https://example.com/article",
+  titlePlaceholder = "Link title (auto-populated from URL)",
+  className = "",
+}: LinkTabProps) {
+  const { metadata, isLoading, error, refetch } = useLinkMetadata(url, {
+    onSuccess: (data) => {
+      // Auto-populate title if empty
+      if (!title && data.title) {
+        onTitleChange(data.title);
+      }
+      onMetadataFetched?.(data);
+    },
+  });
+
+  // Update title when metadata changes (if title is still empty)
+  useEffect(() => {
+    if (metadata?.title && !title) {
+      onTitleChange(metadata.title);
+    }
+  }, [metadata?.title, title, onTitleChange]);
+
+  return (
+    <div className={`flex flex-col gap-6 p-6 ${className}`}>
+      {/* URL Input */}
+      <div>
+        <label
+          htmlFor="link-url"
+          className="mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300"
+        >
+          Link URL <span className="text-pink-600">*</span>
+        </label>
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <LinkIcon className="h-5 w-5 text-neutral-400" />
+          </div>
+          <input
+            id="link-url"
+            type="url"
+            value={url}
+            onChange={(e) => onUrlChange(e.target.value)}
+            placeholder={urlPlaceholder}
+            className="w-full rounded-lg border border-neutral-300 bg-white py-3 pl-10 pr-4 text-neutral-900 placeholder:text-neutral-400 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500/20 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white dark:placeholder:text-neutral-500 dark:focus:border-pink-500"
+          />
+        </div>
+        <p className="mt-1.5 text-sm text-neutral-500 dark:text-neutral-400">
+          Paste a URL and we&apos;ll automatically fetch the title, description,
+          and preview image.
+        </p>
+      </div>
+
+      {/* Metadata Preview */}
+      {(url.length > 10 || isLoading || error || metadata) && (
+        <div>
+          <label className="mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            Link Preview
+          </label>
+          <UrlMetadataPreview
+            metadata={metadata}
+            isLoading={isLoading}
+            error={error}
+            url={url}
+            onRetry={refetch}
+          />
+        </div>
+      )}
+
+      {/* Title Input */}
+      <div>
+        <label
+          htmlFor="link-title"
+          className="mb-2 block text-sm font-medium text-neutral-700 dark:text-neutral-300"
+        >
+          Title <span className="text-pink-600">*</span>
+        </label>
+        <input
+          id="link-title"
+          type="text"
+          value={title}
+          onChange={(e) => onTitleChange(e.target.value)}
+          placeholder={titlePlaceholder}
+          className="w-full rounded-lg border border-neutral-300 bg-white px-4 py-3 text-neutral-900 placeholder:text-neutral-400 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500/20 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white dark:placeholder:text-neutral-500 dark:focus:border-pink-500"
+        />
+        <p className="mt-1.5 text-sm text-neutral-500 dark:text-neutral-400">
+          Edit the title or use the auto-populated one from the link.
+        </p>
+      </div>
+
+      {/* Info Box */}
+      <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
+        <div className="flex gap-3">
+          <svg
+            className="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4" />
+            <path d="M12 8h.01" />
+          </svg>
+          <div className="text-sm">
+            <p className="font-medium text-blue-800 dark:text-blue-200">
+              Sharing a link
+            </p>
+            <p className="mt-1 text-blue-700 dark:text-blue-300">
+              Link posts are great for sharing interesting articles, resources,
+              or tools you&apos;ve found. The community can discuss and comment
+              on the shared content.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/PostEditor/tabs/WriteTab.tsx b/components/PostEditor/tabs/WriteTab.tsx
new file mode 100644
index 00000000..bdb82688
--- /dev/null
+++ b/components/PostEditor/tabs/WriteTab.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import { EditorContent } from "@tiptap/react";
+import TextareaAutosize from "react-textarea-autosize";
+import { ArticleToolbar } from "../toolbar/ArticleToolbar";
+import { useArticleEditor, type EditorMode } from "../hooks/useArticleEditor";
+import { useRef, type ChangeEvent } from "react";
+import { ImageUp } from "lucide-react";
+import copy from "copy-to-clipboard";
+import { toast } from "sonner";
+
+interface WriteTabProps {
+  /** Initial markdown content to load */
+  initialContent?: string;
+  /** Callback when title changes */
+  onTitleChange?: (title: string) => void;
+  /** Callback when body content changes (debounced) */
+  onBodyChange?: (markdown: string) => void;
+  /** Current title value */
+  title?: string;
+  /** Placeholder for title input */
+  titlePlaceholder?: string;
+  /** Placeholder for editor */
+  editorPlaceholder?: string;
+  /** Additional class name for container */
+  className?: string;
+}
+
+export function WriteTab({
+  initialContent = "",
+  onTitleChange,
+  onBodyChange,
+  title = "",
+  titlePlaceholder = "Article title",
+  editorPlaceholder = "Start writing your article...",
+  className = "",
+}: WriteTabProps) {
+  const {
+    editor,
+    mode,
+    markdownContent,
+    setMarkdownContent,
+    toggleMode,
+    uploadImage,
+  } = useArticleEditor({
+    initialContent,
+    placeholder: editorPlaceholder,
+    onContentChange: onBodyChange,
+  });
+
+  const markdownFileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleMarkdownImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // For markdown mode, we'll handle the upload separately
+      // This would insert the markdown image syntax after upload
+      uploadImage(file);
+    }
+    if (markdownFileInputRef.current) {
+      markdownFileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div className={`flex flex-col ${className}`}>
+      {/* Title Input */}
+      <div className="border-b border-neutral-200 dark:border-neutral-700">
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => onTitleChange?.(e.target.value)}
+          placeholder={titlePlaceholder}
+          className="w-full border-none bg-transparent px-4 py-4 text-2xl font-bold text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-0 dark:text-white dark:placeholder:text-neutral-500"
+        />
+      </div>
+
+      {/* Editor */}
+      {mode === "rich" ? (
+        <div className="flex flex-1 flex-col">
+          {/* Toolbar */}
+          <ArticleToolbar
+            editor={editor}
+            onImageUpload={uploadImage}
+            onSwitchToMarkdown={toggleMode}
+          />
+
+          {/* TipTap Editor */}
+          <div className="flex-1 overflow-y-auto bg-white dark:bg-neutral-900">
+            <EditorContent
+              editor={editor}
+              className="min-h-[300px] [&_.ProseMirror]:min-h-[300px] [&_.ProseMirror]:focus:outline-none"
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-1 flex-col">
+          {/* Markdown Mode Header */}
+          <div className="flex items-center justify-between border-b border-neutral-200 bg-neutral-50 px-3 py-2 dark:border-neutral-700 dark:bg-neutral-800">
+            <div className="flex items-center gap-3">
+              {/* Image Upload for Markdown Mode */}
+              <label
+                htmlFor="markdown-image-upload"
+                className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-neutral-300 bg-white px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
+              >
+                <ImageUp className="h-4 w-4" />
+                Upload Image
+              </label>
+              <input
+                ref={markdownFileInputRef}
+                id="markdown-image-upload"
+                type="file"
+                accept="image/jpeg,image/png,image/gif,image/webp"
+                onChange={handleMarkdownImageUpload}
+                className="hidden"
+              />
+
+              {/* Markdown Help Link */}
+              <a
+                href="https://www.markdownguide.org/cheat-sheet/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
+              >
+                <svg
+                  className="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M12 16v-4" />
+                  <path d="M12 8h.01" />
+                </svg>
+                Markdown Guide
+              </a>
+            </div>
+
+            {/* Switch to Rich Text */}
+            <button
+              type="button"
+              onClick={toggleMode}
+              className="flex items-center gap-1.5 text-sm text-pink-600 hover:text-pink-500 dark:text-pink-500 dark:hover:text-pink-400"
+            >
+              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9Zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242Z" />
+              </svg>
+              Switch to Rich Text
+            </button>
+          </div>
+
+          {/* Markdown Textarea */}
+          <div className="flex-1 bg-white dark:bg-neutral-900">
+            <TextareaAutosize
+              value={markdownContent}
+              onChange={(e) => setMarkdownContent(e.target.value)}
+              placeholder={editorPlaceholder}
+              minRows={20}
+              className="w-full resize-none border-none bg-transparent px-4 py-4 font-mono text-base text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-0 dark:text-white dark:placeholder:text-neutral-500"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Export types for use in parent components
+export type { EditorMode };
diff --git a/components/PostEditor/toolbar/ArticleToolbar.tsx b/components/PostEditor/toolbar/ArticleToolbar.tsx
new file mode 100644
index 00000000..bb859578
--- /dev/null
+++ b/components/PostEditor/toolbar/ArticleToolbar.tsx
@@ -0,0 +1,410 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import { useState, useCallback, useRef, type ChangeEvent } from "react";
+
+interface ToolbarButtonProps {
+  onClick: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  title: string;
+  children: React.ReactNode;
+}
+
+function ToolbarButton({
+  onClick,
+  isActive = false,
+  disabled = false,
+  title,
+  children,
+}: ToolbarButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className={`rounded p-1.5 transition-colors ${
+        isActive
+          ? "bg-neutral-200 text-neutral-900 dark:bg-neutral-700 dark:text-white"
+          : "text-neutral-600 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800"
+      } disabled:cursor-not-allowed disabled:opacity-50`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function ToolbarDivider() {
+  return <div className="mx-1 h-5 w-px bg-neutral-200 dark:bg-neutral-700" />;
+}
+
+interface LinkInputProps {
+  onSubmit: (url: string) => void;
+  onCancel: () => void;
+  placeholder?: string;
+}
+
+function UrlInput({
+  onSubmit,
+  onCancel,
+  placeholder = "Enter URL...",
+}: LinkInputProps) {
+  const [url, setUrl] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (url.trim()) {
+      onSubmit(url.trim());
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+    >
+      <input
+        type="url"
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+        placeholder={placeholder}
+        className="w-64 border-none bg-transparent text-sm text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white"
+        autoFocus
+      />
+      <button
+        type="submit"
+        className="text-sm font-medium text-pink-600 hover:text-pink-500"
+      >
+        Add
+      </button>
+      <button
+        type="button"
+        onClick={onCancel}
+        className="text-sm text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300"
+      >
+        Cancel
+      </button>
+    </form>
+  );
+}
+
+// SVG Icons
+const icons = {
+  bold: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M8 11h4.5a2.5 2.5 0 1 0 0-5H8v5Zm10 4.5a4.5 4.5 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.498 4.498 0 0 1 18 15.5ZM8 13v5h5.5a2.5 2.5 0 1 0 0-5H8Z" />
+    </svg>
+  ),
+  italic: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M15 20H7v-2h2.927l2.116-12H9V4h8v2h-2.927l-2.116 12H15v2Z" />
+    </svg>
+  ),
+  strikethrough: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M17.154 14c.23.516.346 1.09.346 1.72 0 1.342-.524 2.392-1.571 3.147C14.88 19.622 13.433 20 11.586 20c-1.64 0-3.263-.381-4.87-1.144v-2.696c1.522.893 3.108 1.34 4.758 1.34.826 0 1.461-.133 1.904-.399.443-.266.664-.632.664-1.097 0-.377-.135-.71-.405-.999a3.06 3.06 0 0 0-.909-.62l-.123-.055H3v-2h18v2h-3.846ZM7.5 10c-.238-.377-.357-.81-.357-1.3 0-.645.122-1.212.367-1.7.245-.49.594-.896 1.046-1.22.453-.325.993-.567 1.62-.727.628-.16 1.323-.24 2.085-.24.847 0 1.548.064 2.104.193.556.129 1.093.282 1.612.459l-.756 2.29c-.383-.163-.8-.293-1.249-.39a6.705 6.705 0 0 0-1.48-.146c-.74 0-1.3.106-1.68.318a1.01 1.01 0 0 0-.57.916c0 .333.125.617.375.85.25.233.602.435 1.057.607l.171.062H7.5Z" />
+    </svg>
+  ),
+  link: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M18.364 15.536 16.95 14.12l1.414-1.414a5 5 0 1 0-7.071-7.071L9.879 7.05 8.464 5.636 9.88 4.222a7 7 0 0 1 9.9 9.9l-1.415 1.414Zm-2.828 2.828-1.415 1.414a7 7 0 0 1-9.9-9.9l1.415-1.414L7.05 9.88l-1.414 1.414a5 5 0 1 0 7.071 7.071l1.414-1.414 1.415 1.414Zm-.708-10.607 1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07Z" />
+    </svg>
+  ),
+  bulletList: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M8 4h13v2H8V4ZM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3ZM8 11h13v2H8v-2Zm0 7h13v2H8v-2Z" />
+    </svg>
+  ),
+  orderedList: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M8 4h13v2H8V4ZM5 3v3h1v1H3V6h1V4H3V3h2Zm-2 7h3.5v1H4v1h1.5v1H3v-4Zm2 6v3h1v1H3v-1h1v-1H3v-1h1v-1H3v-1h2v1Zm4-3h13v2H9v-2Zm0 7h13v2H9v-2Z" />
+    </svg>
+  ),
+  blockquote: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179Zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179Z" />
+    </svg>
+  ),
+  code: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12ZM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12Zm6.96 9H7.66l6.552-18h2.128L9.788 21Z" />
+    </svg>
+  ),
+  codeBlock: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm1 2v14h16V5H4Zm16 7-3.536 3.536-1.414-1.414L17.172 12l-2.122-2.122 1.414-1.414L20 12ZM6.828 12l2.122 2.122-1.414 1.414L4 12l3.536-3.536 1.414 1.414L6.828 12Zm4.416 5H9.116l3.64-10h2.128l-3.64 10Z" />
+    </svg>
+  ),
+  heading1: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M13 20h-2v-7H4v7H2V4h2v7h7V4h2v16Zm8-12v12h-2v-9.796l-2 .536V8.67L19.5 8H21Z" />
+    </svg>
+  ),
+  heading2: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M4 4v7h7V4h2v16h-2v-7H4v7H2V4h2Zm14.5 4c2.071 0 3.75 1.679 3.75 3.75 0 .857-.288 1.648-.772 2.28l-.148.18L18.034 18H22v2h-7v-1.556l4.82-5.546c.268-.307.43-.709.43-1.148 0-.966-.784-1.75-1.75-1.75-.918 0-1.671.707-1.744 1.606l-.006.144h-2C14.75 9.679 16.429 8 18.5 8Z" />
+    </svg>
+  ),
+  heading3: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M22 8l-.002 2-2.505-.002c.93.701 1.507 1.79 1.507 3.002 0 2.071-1.679 3.75-3.75 3.75-2.071 0-3.75-1.679-3.75-3.75h2c0 .966.784 1.75 1.75 1.75s1.75-.784 1.75-1.75-.784-1.75-1.75-1.75H15v-2h2.25c.966 0 1.75-.784 1.75-1.75S18.216 5.75 17.25 5.75 15.5 6.534 15.5 7.5h-2c0-2.071 1.679-3.75 3.75-3.75S21 5.429 21 7.5c0 .857-.288 1.648-.772 2.28l-.148.18L22 8ZM4 4v7h7V4h2v16h-2v-7H4v7H2V4h2Z" />
+    </svg>
+  ),
+  image: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828ZM20 15V5H4v14L14 9l6 6Zm0 2.828l-6-6L6.828 19H20v-1.172ZM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z" />
+    </svg>
+  ),
+  horizontalRule: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M2 11h2v2H2v-2Zm4 0h12v2H6v-2Zm14 0h2v2h-2v-2Z" />
+    </svg>
+  ),
+  youtube: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38 1.035.28 1.85 1.119 2.12 2.178.466 1.819.476 5.245.476 5.347v.003c0 .1-.01 3.521-.476 5.344a3.03 3.03 0 0 1-2.12 2.178c-.709.197-2.137.313-3.566.38l-.504.022c-1.42.057-2.756.07-3.29.073H11.76c-.564-.003-2.037-.018-3.58-.085l-.377-.018c-1.497-.073-2.994-.195-3.726-.394-1.035-.28-1.85-1.119-2.12-2.178C1.488 15.5 1.478 12.078 1.478 12v-.003c0-.102.01-3.528.476-5.347a3.03 3.03 0 0 1 2.12-2.178c.732-.199 2.229-.32 3.726-.394l.377-.018c1.543-.067 3.016-.082 3.58-.085h.487ZM9.999 8.5v7l6-3.5-6-3.5Z" />
+    </svg>
+  ),
+};
+
+interface ArticleToolbarProps {
+  editor: Editor | null;
+  onImageUpload?: (file: File) => void;
+  onSwitchToMarkdown?: () => void;
+}
+
+export function ArticleToolbar({
+  editor,
+  onImageUpload,
+  onSwitchToMarkdown,
+}: ArticleToolbarProps) {
+  const [showLinkInput, setShowLinkInput] = useState(false);
+  const [showYoutubeInput, setShowYoutubeInput] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleAddLink = useCallback(
+    (url: string) => {
+      if (editor) {
+        editor.chain().focus().setLink({ href: url }).run();
+      }
+      setShowLinkInput(false);
+    },
+    [editor],
+  );
+
+  const handleAddYoutube = useCallback(
+    (url: string) => {
+      if (editor) {
+        editor.chain().focus().setYoutubeVideo({ src: url }).run();
+      }
+      setShowYoutubeInput(false);
+    },
+    [editor],
+  );
+
+  const handleFileChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file && onImageUpload) {
+        onImageUpload(file);
+      }
+      // Reset input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [onImageUpload],
+  );
+
+  if (!editor) return null;
+
+  if (showLinkInput) {
+    return (
+      <div className="border-b border-neutral-200 bg-neutral-50 p-2 dark:border-neutral-700 dark:bg-neutral-800">
+        <UrlInput
+          onSubmit={handleAddLink}
+          onCancel={() => setShowLinkInput(false)}
+          placeholder="Enter link URL..."
+        />
+      </div>
+    );
+  }
+
+  if (showYoutubeInput) {
+    return (
+      <div className="border-b border-neutral-200 bg-neutral-50 p-2 dark:border-neutral-700 dark:bg-neutral-800">
+        <UrlInput
+          onSubmit={handleAddYoutube}
+          onCancel={() => setShowYoutubeInput(false)}
+          placeholder="Enter YouTube URL..."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 px-3 py-2 dark:border-neutral-700 dark:bg-neutral-800">
+      <div className="flex flex-wrap items-center gap-0.5">
+        {/* Headings */}
+        <ToolbarButton
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 1 }).run()
+          }
+          isActive={editor.isActive("heading", { level: 1 })}
+          title="Heading 1"
+        >
+          {icons.heading1}
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 2 }).run()
+          }
+          isActive={editor.isActive("heading", { level: 2 })}
+          title="Heading 2"
+        >
+          {icons.heading2}
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 3 }).run()
+          }
+          isActive={editor.isActive("heading", { level: 3 })}
+          title="Heading 3"
+        >
+          {icons.heading3}
+        </ToolbarButton>
+
+        <ToolbarDivider />
+
+        {/* Text formatting */}
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          isActive={editor.isActive("bold")}
+          title="Bold (Ctrl+B)"
+        >
+          {icons.bold}
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          isActive={editor.isActive("italic")}
+          title="Italic (Ctrl+I)"
+        >
+          {icons.italic}
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          isActive={editor.isActive("strike")}
+          title="Strikethrough"
+        >
+          {icons.strikethrough}
+        </ToolbarButton>
+
+        <ToolbarDivider />
+
+        {/* Link */}
+        <ToolbarButton
+          onClick={() => {
+            if (editor.isActive("link")) {
+              editor.chain().focus().unsetLink().run();
+            } else {
+              setShowLinkInput(true);
+            }
+          }}
+          isActive={editor.isActive("link")}
+          title="Link"
+        >
+          {icons.link}
+        </ToolbarButton>
+
+        {/* Image */}
+        <ToolbarButton
+          onClick={() => fileInputRef.current?.click()}
+          title="Insert Image"
+        >
+          {icons.image}
+        </ToolbarButton>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/jpeg,image/png,image/gif,image/webp"
+          onChange={handleFileChange}
+          className="hidden"
+        />
+
+        <ToolbarDivider />
+
+        {/* Lists */}
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          isActive={editor.isActive("bulletList")}
+          title="Bullet List"
+        >
+          {icons.bulletList}
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          isActive={editor.isActive("orderedList")}
+          title="Numbered List"
+        >
+          {icons.orderedList}
+        </ToolbarButton>
+
+        <ToolbarDivider />
+
+        {/* Block elements */}
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          isActive={editor.isActive("blockquote")}
+          title="Quote"
+        >
+          {icons.blockquote}
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          isActive={editor.isActive("code")}
+          title="Inline Code"
+        >
+          {icons.code}
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          isActive={editor.isActive("codeBlock")}
+          title="Code Block"
+        >
+          {icons.codeBlock}
+        </ToolbarButton>
+
+        <ToolbarDivider />
+
+        {/* Special elements */}
+        <ToolbarButton
+          onClick={() => editor.chain().focus().setHorizontalRule().run()}
+          title="Horizontal Rule"
+        >
+          {icons.horizontalRule}
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => setShowYoutubeInput(true)}
+          title="YouTube Video"
+        >
+          {icons.youtube}
+        </ToolbarButton>
+      </div>
+
+      {/* Switch to Markdown */}
+      {onSwitchToMarkdown && (
+        <button
+          type="button"
+          onClick={onSwitchToMarkdown}
+          className="flex items-center gap-1.5 text-sm text-pink-600 hover:text-pink-500 dark:text-pink-500 dark:hover:text-pink-400"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm1 2v14h16V5H4Zm3 10.5H5v-7h2l2 2.5 2-2.5h2v7h-2v-4l-2 2.5-2-2.5v4Zm11-3h2l-3 3-3-3h2V8h2v4.5Z" />
+          </svg>
+          Switch to Markdown
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/components/editor/editor/extensions/slash-command.tsx b/components/editor/editor/extensions/slash-command.tsx
index 557ad258..0bb4d623 100644
--- a/components/editor/editor/extensions/slash-command.tsx
+++ b/components/editor/editor/extensions/slash-command.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+ 
 import React, {
   useState,
   useEffect,
@@ -231,11 +231,11 @@ const CommandList = ({
   range: any;
 }) => {
   // Use items.length as key to reset selectedIndex when items change
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+   
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   // Reset selection when items change - using useLayoutEffect to run synchronously
-  // eslint-disable-next-line react-hooks/set-state-in-effect
+   
   useLayoutEffect(() => {
     setSelectedIndex(0);
   }, [items]);
diff --git a/components/editor/editor/index.tsx b/components/editor/editor/index.tsx
index 32dfcb60..9d2d86df 100644
--- a/components/editor/editor/index.tsx
+++ b/components/editor/editor/index.tsx
@@ -32,7 +32,7 @@ export default function Editor({ onChange, initialValue }: EditorProps) {
 
   return (
     // TODO: Review this for no-static-element-interactions click-events-have-key-events
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+     
     <div
       className="relative"
       onClick={() => {
diff --git a/components/editor/editor/plugins/upload-images.tsx b/components/editor/editor/plugins/upload-images.tsx
index 8626dea0..bec07b45 100644
--- a/components/editor/editor/plugins/upload-images.tsx
+++ b/components/editor/editor/plugins/upload-images.tsx
@@ -18,7 +18,7 @@ const UploadImagesPlugin = () =>
       apply(tr, set) {
         set = set.map(tr.mapping, tr.doc);
         // See if the transaction adds or removes any placeholders
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+         
         const action = tr.getMeta(uploadKey as any);
         if (action && action.add) {
           const { id, pos, src } = action.add;
diff --git a/e2e/constants/constants.ts b/e2e/constants/constants.ts
index 50bda3fb..1fff7321 100644
--- a/e2e/constants/constants.ts
+++ b/e2e/constants/constants.ts
@@ -19,3 +19,9 @@ export const E2E_ADMIN_SESSION_ID = "21245877-cd7d-5c63-94e8-57fd1b5dc986";
 export const E2E_PUBLISHED_POST_ID = "e2epubl1";
 export const E2E_SCHEDULED_POST_ID = "e2esched";
 export const E2E_DRAFT_POST_ID = "e2edraft";
+
+// Link post test constants
+export const E2E_LINK_POST_ID = "e2elinkp";
+export const E2E_LINK_POST_DRAFT_ID = "e2elnkdr";
+export const TEST_LINK_URL = "https://github.com/codu-code/codu";
+export const TEST_LINK_TITLE = "Codú - A space for coders";
diff --git a/e2e/editor.spec.ts b/e2e/editor.spec.ts
new file mode 100644
index 00000000..b2ea7b6c
--- /dev/null
+++ b/e2e/editor.spec.ts
@@ -0,0 +1,1017 @@
+import { test, expect } from "playwright/test";
+import { loggedInAsUserOne, articleContent } from "./utils";
+
+// Test constants
+const BASE_URL = process.env.E2E_BASE_URL || "http://localhost:3000";
+const CREATE_URL = `${BASE_URL}/create`;
+
+// Selectors
+const SELECTORS = {
+  // Tabs
+  writeTab: 'button:has-text("Write")',
+  linkTab: 'button:has-text("Link")',
+
+  // Write tab
+  titleInput: 'input[placeholder="Article title"]',
+  editorContent: ".ProseMirror",
+
+  // Link tab
+  linkUrlInput: "#link-url",
+  linkTitleInput: "#link-title",
+  linkPreview: 'label:has-text("Link Preview")',
+  linkInfoBox: 'text="Sharing a link"',
+
+  // Tags
+  tagInput: 'input[placeholder*="Add tags"], input[placeholder*="Add more"]',
+
+  // More Options
+  moreOptionsButton: 'button:has-text("More Options")',
+  excerptTextarea: "#excerpt",
+  canonicalUrlInput: "#canonicalUrl",
+  scheduleSwitch: "#schedule-switch",
+  datetimeInput: 'input[type="datetime-local"]',
+
+  // Actions
+  saveDraftButton: 'button:has-text("Save Draft")',
+  savedButton: 'button:has-text("Saved")',
+  publishButton: 'button:has-text("Publish")',
+  shareDraftButton: 'button:has-text("Share Draft")',
+  previewButton: 'button:has-text("Preview")',
+  editButton: 'button:has-text("Edit")',
+
+  // Modal buttons
+  letsDoThisButton: 'button:has-text("Let\'s do this!")',
+  shareItButton: 'button:has-text("Share it!")',
+  maybeLaterButton: 'button:has-text("Maybe later")',
+  notYetButton: 'button:has-text("Not yet")',
+
+  // Toolbar buttons (Write tab)
+  boldButton: 'button[title*="Bold"]',
+  italicButton: 'button[title*="Italic"]',
+  headingButton: 'button[title*="Heading"]',
+  linkButton: 'button[title*="Link"]',
+  codeBlockButton: 'button[title*="Code"]',
+  markdownModeButton: 'button:has-text("Markdown")',
+  switchToRichTextButton: 'button:has-text("Switch to Rich Text")',
+};
+
+// ============================================
+// UNAUTHENTICATED ACCESS TESTS
+// ============================================
+test.describe("Unauthenticated Editor Access", () => {
+  test("Should redirect to /get-started when accessing /create without auth", async ({
+    page,
+  }) => {
+    await page.goto(CREATE_URL);
+    await page.waitForURL(/.*get-started.*/);
+    expect(page.url()).toContain("get-started");
+  });
+
+  test("Should redirect from /create?tab=write without auth", async ({
+    page,
+  }) => {
+    await page.goto(`${CREATE_URL}?tab=write`);
+    await page.waitForURL(/.*get-started.*/);
+    expect(page.url()).toContain("get-started");
+  });
+
+  test("Should redirect from /create?tab=link without auth", async ({
+    page,
+  }) => {
+    await page.goto(`${CREATE_URL}?tab=link`);
+    await page.waitForURL(/.*get-started.*/);
+    expect(page.url()).toContain("get-started");
+  });
+});
+
+// ============================================
+// WRITE TAB EDITOR TESTS
+// ============================================
+test.describe("Write Tab Editor", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test.describe("Basic Functionality", () => {
+    test("Should load write tab by default", async ({ page }) => {
+      await page.goto(CREATE_URL);
+      await expect(page.locator(SELECTORS.writeTab)).toBeVisible();
+      await expect(page.locator(SELECTORS.titleInput)).toBeVisible();
+      await expect(page.locator(SELECTORS.editorContent)).toBeVisible();
+    });
+
+    test("Should load write tab via ?tab=write URL param", async ({ page }) => {
+      await page.goto(`${CREATE_URL}?tab=write`);
+      await expect(page.locator(SELECTORS.titleInput)).toBeVisible();
+      await expect(page.locator(SELECTORS.editorContent)).toBeVisible();
+    });
+
+    test("Should allow entering title text", async ({ page }) => {
+      await page.goto(CREATE_URL);
+      const title = "Test Article Title";
+      await page.locator(SELECTORS.titleInput).fill(title);
+      await expect(page.locator(SELECTORS.titleInput)).toHaveValue(title);
+    });
+
+    test("Should allow entering content in TipTap editor", async ({ page }) => {
+      await page.goto(CREATE_URL);
+
+      // Click into the editor and type
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type("This is test content for the article.");
+
+      await expect(page.locator(SELECTORS.editorContent)).toContainText(
+        "This is test content",
+      );
+    });
+  });
+
+  test.describe("Toolbar Functionality", () => {
+    test("Should show toolbar with formatting buttons", async ({ page }) => {
+      await page.goto(CREATE_URL);
+
+      // Wait for toolbar to load
+      await page.waitForSelector(SELECTORS.editorContent);
+
+      // Check for common toolbar buttons - use more flexible selectors
+      await expect(
+        page
+          .locator('button[title*="Bold"], button[aria-label*="bold"]')
+          .first(),
+      ).toBeVisible();
+      await expect(
+        page
+          .locator('button[title*="Italic"], button[aria-label*="italic"]')
+          .first(),
+      ).toBeVisible();
+    });
+
+    test("Should apply bold formatting via keyboard shortcut", async ({
+      page,
+    }) => {
+      await page.goto(CREATE_URL);
+
+      // Type some text
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type("bold text");
+
+      // Select all text using keyboard
+      await page.keyboard.press("Meta+a");
+
+      // Apply bold via keyboard shortcut
+      await page.keyboard.press("Meta+b");
+
+      // Check for bold formatting - TipTap uses <strong> tag
+      await expect(
+        page.locator(`${SELECTORS.editorContent} strong`),
+      ).toBeVisible({
+        timeout: 5000,
+      });
+    });
+
+    test("Should apply italic formatting via keyboard shortcut", async ({
+      page,
+    }) => {
+      await page.goto(CREATE_URL);
+
+      // Type some text
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type("italic text");
+
+      // Select all text using keyboard
+      await page.keyboard.press("Meta+a");
+
+      // Apply italic via keyboard shortcut
+      await page.keyboard.press("Meta+i");
+
+      // Check for italic formatting - TipTap uses <em> tag
+      await expect(page.locator(`${SELECTORS.editorContent} em`)).toBeVisible({
+        timeout: 5000,
+      });
+    });
+  });
+
+  test.describe("Markdown Mode", () => {
+    test("Should switch to markdown mode", async ({ page }) => {
+      await page.goto(CREATE_URL);
+
+      // Enter some content first
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type("Some content");
+
+      // Click markdown mode button
+      await page.locator(SELECTORS.markdownModeButton).click();
+
+      // Should show switch to rich text button
+      await expect(
+        page.locator(SELECTORS.switchToRichTextButton),
+      ).toBeVisible();
+    });
+
+    test("Should switch back to rich text mode", async ({ page }) => {
+      await page.goto(CREATE_URL);
+
+      // Enter content and switch to markdown
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type("Test content");
+      await page.locator(SELECTORS.markdownModeButton).click();
+
+      // Switch back to rich text
+      await page.locator(SELECTORS.switchToRichTextButton).click();
+
+      // Should show the editor again
+      await expect(page.locator(SELECTORS.editorContent)).toBeVisible();
+    });
+  });
+
+  test.describe("Preview Mode", () => {
+    test("Should toggle to preview mode", async ({ page }) => {
+      await page.goto(CREATE_URL);
+
+      // Enter title and content
+      await page.locator(SELECTORS.titleInput).fill("Preview Test Title");
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type("Preview content here");
+
+      // Click preview button
+      await page.locator(SELECTORS.previewButton).click();
+
+      // Should show Edit button instead of Preview
+      await expect(page.locator(SELECTORS.editButton)).toBeVisible();
+
+      // Should display the title in preview
+      await expect(page.locator("h1")).toContainText("Preview Test Title");
+    });
+
+    test("Should return to edit mode from preview", async ({ page }) => {
+      await page.goto(CREATE_URL);
+
+      // Enter content and go to preview
+      await page.locator(SELECTORS.titleInput).fill("Test Title");
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type("Content");
+      await page.locator(SELECTORS.previewButton).click();
+
+      // Click Edit to return
+      await page.locator(SELECTORS.editButton).click();
+
+      // Should show the editor again
+      await expect(page.locator(SELECTORS.editorContent)).toBeVisible();
+    });
+  });
+});
+
+// ============================================
+// LINK TAB EDITOR TESTS
+// ============================================
+test.describe("Link Tab Editor", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test.describe("UI Elements", () => {
+    test("Should load link tab via ?tab=link URL param", async ({ page }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+      await expect(page.locator(SELECTORS.linkUrlInput)).toBeVisible();
+      await expect(page.locator(SELECTORS.linkTitleInput)).toBeVisible();
+    });
+
+    test("Should switch to link tab by clicking tab button", async ({
+      page,
+    }) => {
+      await page.goto(CREATE_URL);
+      await page.locator(SELECTORS.linkTab).click();
+
+      await expect(page.locator(SELECTORS.linkUrlInput)).toBeVisible();
+      await expect(page.locator(SELECTORS.linkTitleInput)).toBeVisible();
+    });
+
+    test("Should show info box about sharing links", async ({ page }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+      await expect(page.locator(SELECTORS.linkInfoBox)).toBeVisible();
+    });
+  });
+
+  test.describe("URL & Title Input", () => {
+    test("Should allow entering URL", async ({ page }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+      const testUrl = "https://github.com/codu-code/codu";
+
+      await page.locator(SELECTORS.linkUrlInput).fill(testUrl);
+      await expect(page.locator(SELECTORS.linkUrlInput)).toHaveValue(testUrl);
+    });
+
+    test("Should allow manual title entry", async ({ page }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+      const testTitle = "My Custom Link Title";
+
+      await page.locator(SELECTORS.linkTitleInput).fill(testTitle);
+      await expect(page.locator(SELECTORS.linkTitleInput)).toHaveValue(
+        testTitle,
+      );
+    });
+
+    test("Should show link preview section when URL is entered", async ({
+      page,
+    }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+
+      // Enter a URL long enough to trigger preview
+      await page
+        .locator(SELECTORS.linkUrlInput)
+        .fill("https://github.com/codu-code/codu");
+
+      // Wait for preview section to appear
+      await expect(page.locator(SELECTORS.linkPreview)).toBeVisible({
+        timeout: 10000,
+      });
+    });
+  });
+});
+
+// ============================================
+// TAB SWITCHING & LOCKING TESTS
+// ============================================
+test.describe("Tab Switching & Locking", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test("Should allow switching tabs when no content", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Switch to Link tab
+    await page.locator(SELECTORS.linkTab).click();
+    await expect(page.locator(SELECTORS.linkUrlInput)).toBeVisible();
+
+    // Switch back to Write tab
+    await page.locator(SELECTORS.writeTab).click();
+    await expect(page.locator(SELECTORS.editorContent)).toBeVisible();
+  });
+
+  test("Should disable Write tab when Link has content", async ({ page }) => {
+    await page.goto(`${CREATE_URL}?tab=link`);
+
+    // Enter URL in link tab
+    await page.locator(SELECTORS.linkUrlInput).fill("https://example.com");
+
+    // Write tab should be disabled
+    const writeTab = page.locator(SELECTORS.writeTab);
+    await expect(writeTab).toHaveAttribute("disabled", "");
+    await expect(writeTab).toHaveClass(/opacity-50/);
+  });
+
+  test("Should disable Link tab when Write has content", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter content in write tab
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type("Some article content here");
+
+    // Link tab should be disabled
+    const linkTab = page.locator(SELECTORS.linkTab);
+    await expect(linkTab).toHaveAttribute("disabled", "");
+    await expect(linkTab).toHaveClass(/opacity-50/);
+  });
+});
+
+// ============================================
+// TAGS INPUT TESTS
+// ============================================
+test.describe("Tags Input", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test("Should show tags input section", async ({ page }) => {
+    await page.goto(CREATE_URL);
+    await expect(page.locator('text="Tags"')).toBeVisible();
+    await expect(page.locator(SELECTORS.tagInput)).toBeVisible();
+  });
+
+  test("Should add tag on Enter key", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // First click on the tag input area to focus it
+    await page.locator(SELECTORS.tagInput).first().fill("javascript");
+    await page.keyboard.press("Enter");
+
+    // Tag should be visible as a badge (lowercase)
+    await expect(page.locator('text="javascript"')).toBeVisible();
+  });
+
+  test("Should add tag on comma", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    await page.locator(SELECTORS.tagInput).first().fill("react,");
+
+    // Tag should be visible (lowercase)
+    await expect(page.locator('text="react"')).toBeVisible();
+  });
+
+  test("Should remove tag with X button", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Add a tag
+    await page.locator(SELECTORS.tagInput).first().fill("typescript");
+    await page.keyboard.press("Enter");
+
+    // Verify tag exists (lowercase)
+    await expect(page.locator('text="typescript"')).toBeVisible();
+
+    // Click the remove button on the tag (lowercase in aria-label)
+    await page.locator('button[aria-label="Remove typescript tag"]').click();
+
+    // Tag should be gone
+    await expect(page.locator('text="typescript"')).toBeHidden();
+  });
+
+  test("Should enforce max 5 tags limit", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Add 5 tags
+    const tags = ["tag1", "tag2", "tag3", "tag4", "tag5"];
+    for (const tag of tags) {
+      await page.locator(SELECTORS.tagInput).first().fill(tag);
+      await page.keyboard.press("Enter");
+      // Wait for tag to be added
+      await expect(page.locator(`text="${tag}"`)).toBeVisible();
+    }
+
+    // Try to add a 6th tag - input should be hidden
+    await expect(page.locator('input[placeholder*="Add tags"]')).toBeHidden();
+    await expect(page.locator('input[placeholder*="Add more"]')).toBeHidden();
+  });
+
+  test("Should prevent duplicate tags", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Add a tag twice
+    await page.locator(SELECTORS.tagInput).first().fill("duplicate");
+    await page.keyboard.press("Enter");
+    await expect(page.locator('text="duplicate"')).toBeVisible();
+
+    await page.locator(SELECTORS.tagInput).first().fill("duplicate");
+    await page.keyboard.press("Enter");
+
+    // Should only have one instance of the tag (lowercase)
+    const tagCount = await page.locator('span:has-text("duplicate")').count();
+    expect(tagCount).toBe(1);
+  });
+});
+
+// ============================================
+// MORE OPTIONS ACCORDION TESTS
+// ============================================
+test.describe("More Options Accordion", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test("Should show More Options button", async ({ page }) => {
+    await page.goto(CREATE_URL);
+    await expect(page.locator(SELECTORS.moreOptionsButton)).toBeVisible();
+  });
+
+  test("Should expand accordion on click", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Click to expand
+    await page.locator(SELECTORS.moreOptionsButton).click();
+
+    // Excerpt field should be visible
+    await expect(page.locator(SELECTORS.excerptTextarea)).toBeVisible();
+  });
+
+  test("Should allow entering excerpt text", async ({ page }) => {
+    await page.goto(CREATE_URL);
+    await page.locator(SELECTORS.moreOptionsButton).click();
+
+    const excerptText = "This is a custom excerpt for the article.";
+    await page.locator(SELECTORS.excerptTextarea).fill(excerptText);
+
+    await expect(page.locator(SELECTORS.excerptTextarea)).toHaveValue(
+      excerptText,
+    );
+  });
+
+  test("Should allow entering canonical URL", async ({ page }) => {
+    await page.goto(CREATE_URL);
+    await page.locator(SELECTORS.moreOptionsButton).click();
+
+    const canonicalUrl = "https://mysite.com/original-post";
+    await page.locator(SELECTORS.canonicalUrlInput).fill(canonicalUrl);
+
+    await expect(page.locator(SELECTORS.canonicalUrlInput)).toHaveValue(
+      canonicalUrl,
+    );
+  });
+
+  test("Should show schedule toggle", async ({ page }) => {
+    await page.goto(CREATE_URL);
+    await page.locator(SELECTORS.moreOptionsButton).click();
+
+    await expect(page.locator(SELECTORS.scheduleSwitch)).toBeVisible();
+  });
+
+  test("Should show date picker when scheduling enabled", async ({ page }) => {
+    await page.goto(CREATE_URL);
+    await page.locator(SELECTORS.moreOptionsButton).click();
+
+    // Enable scheduling
+    await page.locator(SELECTORS.scheduleSwitch).click();
+
+    // Date picker should appear
+    await expect(page.locator(SELECTORS.datetimeInput)).toBeVisible();
+  });
+
+  test("More Options should not be visible on Link tab", async ({ page }) => {
+    await page.goto(`${CREATE_URL}?tab=link`);
+
+    // More Options should not be visible for link posts
+    await expect(page.locator(SELECTORS.moreOptionsButton)).toBeHidden();
+  });
+});
+
+// ============================================
+// PUBLISH BUTTON VALIDATION TESTS
+// ============================================
+test.describe("Publish Button Validation", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test.describe("Write Tab Validation", () => {
+    test("Publish button should be disabled when title is empty", async ({
+      page,
+    }) => {
+      await page.goto(CREATE_URL);
+
+      // Add only body content (more than 10 chars)
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type(
+        "This is some body content that is long enough for testing",
+      );
+
+      // Wait a moment for state to update
+      await page.waitForTimeout(500);
+
+      // Both nav and action bar Publish buttons should be disabled
+      const navPublishButton = page.locator('nav button:has-text("Publish")');
+      await expect(navPublishButton).toBeDisabled();
+    });
+
+    test("Publish button should be disabled when body is empty", async ({
+      page,
+    }) => {
+      await page.goto(CREATE_URL);
+
+      // Add only title (more than 5 chars)
+      await page.locator(SELECTORS.titleInput).fill("My Article Title Here");
+
+      // Wait a moment for state to update
+      await page.waitForTimeout(500);
+
+      // Nav Publish button should be disabled
+      const navPublishButton = page.locator('nav button:has-text("Publish")');
+      await expect(navPublishButton).toBeDisabled();
+    });
+
+    test("Publish button should be disabled when title is too short", async ({
+      page,
+    }) => {
+      await page.goto(CREATE_URL);
+
+      // Title less than 5 chars
+      await page.locator(SELECTORS.titleInput).fill("Hi");
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type(
+        "This is enough body content here for testing purposes",
+      );
+
+      // Wait a moment for state to update
+      await page.waitForTimeout(500);
+
+      // Nav Publish button should be disabled
+      const navPublishButton = page.locator('nav button:has-text("Publish")');
+      await expect(navPublishButton).toBeDisabled();
+    });
+
+    test("Publish button should be enabled when title and body are valid", async ({
+      page,
+    }) => {
+      await page.goto(CREATE_URL);
+
+      // Valid title (5+ chars)
+      await page.locator(SELECTORS.titleInput).fill("Valid Title Here");
+
+      // Valid body (10+ chars)
+      await page.locator(SELECTORS.editorContent).click();
+      await page.keyboard.type(
+        "This is valid body content with more text for testing",
+      );
+
+      // Wait a moment for state to update
+      await page.waitForTimeout(500);
+
+      // Nav Publish button should be enabled
+      const navPublishButton = page.locator('nav button:has-text("Publish")');
+      await expect(navPublishButton).toBeEnabled();
+    });
+  });
+
+  test.describe("Link Tab Validation", () => {
+    test("Publish button should be disabled when URL is empty", async ({
+      page,
+    }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+
+      // Add only title
+      await page.locator(SELECTORS.linkTitleInput).fill("Link Title");
+
+      // Wait a moment for state to update
+      await page.waitForTimeout(500);
+
+      // Nav Publish button should be disabled
+      const navPublishButton = page.locator('nav button:has-text("Publish")');
+      await expect(navPublishButton).toBeDisabled();
+    });
+
+    test("Publish button should be disabled when title is empty", async ({
+      page,
+    }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+
+      // Add only URL
+      await page.locator(SELECTORS.linkUrlInput).fill("https://example.com");
+
+      // Wait a moment for state to update
+      await page.waitForTimeout(500);
+
+      // Nav Publish button should be disabled (needs title)
+      const navPublishButton = page.locator('nav button:has-text("Publish")');
+      await expect(navPublishButton).toBeDisabled();
+    });
+
+    test("Publish button should be enabled when URL and title are provided", async ({
+      page,
+    }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+
+      // Add URL and title
+      await page.locator(SELECTORS.linkUrlInput).fill("https://example.com");
+      await page.locator(SELECTORS.linkTitleInput).fill("Example Link Title");
+
+      // Wait a moment for state to update
+      await page.waitForTimeout(500);
+
+      // Nav Publish button should be enabled
+      const navPublishButton = page.locator('nav button:has-text("Publish")');
+      await expect(navPublishButton).toBeEnabled();
+    });
+
+    test("Should disable publish button when title is cleared after being filled", async ({
+      page,
+    }) => {
+      await page.goto(`${CREATE_URL}?tab=link`);
+
+      // Add URL and title
+      await page.locator(SELECTORS.linkUrlInput).fill("https://example.com");
+      await page.locator(SELECTORS.linkTitleInput).fill("Temp Title");
+
+      // Wait for button to be enabled
+      await page.waitForTimeout(500);
+      const navPublishButton = page.locator('nav button:has-text("Publish")');
+      await expect(navPublishButton).toBeEnabled();
+
+      // Clear the title field using Select All + Delete
+      await page.locator(SELECTORS.linkTitleInput).focus();
+      await page.keyboard.press("Meta+a");
+      await page.keyboard.press("Backspace");
+
+      // Verify the field is empty
+      await expect(page.locator(SELECTORS.linkTitleInput)).toHaveValue("");
+
+      // Publish button should now be disabled
+      await expect(navPublishButton).toBeDisabled();
+    });
+  });
+});
+
+// ============================================
+// DRAFT MANAGEMENT TESTS
+// ============================================
+test.describe("Draft Management", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test("Should show Save Draft button when content exists", async ({
+    page,
+  }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter valid content
+    await page.locator(SELECTORS.titleInput).fill("Draft Article Title");
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type("This is draft body content here for testing");
+
+    // Wait for state to update
+    await page.waitForTimeout(500);
+
+    // Save Draft button should be visible in action bar
+    await expect(page.locator(SELECTORS.saveDraftButton)).toBeVisible();
+  });
+
+  test("Should show saved time indicator after auto-save", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter valid content - title first
+    await page.locator(SELECTORS.titleInput).fill("Draft Article Title");
+
+    // Then body content - this triggers auto-save after debounce
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type(
+      "This is draft body content for testing auto save indicator feature",
+    );
+
+    // Wait for auto-save to trigger and URL to update (debounce is 1500ms + save time)
+    await page.waitForURL(/.*create\/[a-z0-9]+/, { timeout: 20000 });
+
+    // Saved time should appear in nav after auto-save completes (look for timestamp format)
+    await expect(page.locator("nav").locator("text=/Saved .+\\d/")).toBeVisible(
+      { timeout: 10000 },
+    );
+  });
+
+  test("Should show Share Draft button after auto-save", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter valid content - title first
+    await page.locator(SELECTORS.titleInput).fill("Test Draft for Sharing");
+
+    // Then body content - this triggers auto-save after debounce
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type(
+      "Content for testing share draft feature auto save test",
+    );
+
+    // Wait for auto-save to trigger and URL to update (debounce is 1500ms + save time)
+    await page.waitForURL(/.*create\/[a-z0-9]+/, { timeout: 20000 });
+
+    // Share Draft button should appear after save
+    await expect(page.locator(SELECTORS.shareDraftButton)).toBeVisible({
+      timeout: 10000,
+    });
+  });
+
+  test("Auto-save should update URL with post ID", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter valid content that meets auto-save requirements
+    await page.locator(SELECTORS.titleInput).fill("Auto Save Test Title");
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type(
+      "Auto save content that is long enough to trigger save functionality",
+    );
+
+    // Wait for auto-save to trigger and URL to update (debounce is 1500ms)
+    await page.waitForURL(/.*create\/[a-z0-9]+/, { timeout: 20000 });
+
+    expect(page.url()).toMatch(/create\/[a-z0-9]+/);
+  });
+});
+
+// ============================================
+// PUBLISH FLOW TESTS
+// ============================================
+test.describe("Publish Flow", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test("Should show confirmation modal for write tab", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter valid content
+    await page.locator(SELECTORS.titleInput).fill("Article to Publish");
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type(articleContent);
+
+    // Wait for state to update
+    await page.waitForTimeout(500);
+
+    // Click Publish button in nav
+    await page.locator('nav button:has-text("Publish")').click();
+
+    // Modal should appear with whimsical content
+    await expect(page.locator('text="Ready to launch?"')).toBeVisible();
+    await expect(page.locator(SELECTORS.letsDoThisButton)).toBeVisible();
+    await expect(page.locator(SELECTORS.maybeLaterButton)).toBeVisible();
+  });
+
+  test("Should close modal on 'Maybe later'", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter valid content
+    await page.locator(SELECTORS.titleInput).fill("Test Modal Close");
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type(
+      "Content for modal close test with enough text for testing",
+    );
+
+    // Wait for state to update
+    await page.waitForTimeout(500);
+
+    // Open modal
+    await page.locator('nav button:has-text("Publish")').click();
+    await expect(page.locator('text="Ready to launch?"')).toBeVisible();
+
+    // Wait for modal animation to settle, then click Maybe later
+    const maybeLaterBtn = page.locator(SELECTORS.maybeLaterButton);
+    await expect(maybeLaterBtn).toBeVisible();
+    await maybeLaterBtn.click({ timeout: 10000 });
+
+    // Modal should close
+    await expect(page.locator('text="Ready to launch?"')).toBeHidden();
+  });
+
+  test("Should show link-specific modal for Link tab", async ({ page }) => {
+    await page.goto(`${CREATE_URL}?tab=link`);
+
+    // Enter link content
+    await page.locator(SELECTORS.linkUrlInput).fill("https://github.com");
+    await page.locator(SELECTORS.linkTitleInput).fill("GitHub Link");
+
+    // Wait for state to update
+    await page.waitForTimeout(500);
+
+    // Click Publish button in nav
+    await page.locator('nav button:has-text("Publish")').click();
+
+    // Should show link-specific modal text
+    await expect(page.locator('text="Spread the word!"')).toBeVisible();
+    await expect(page.locator(SELECTORS.shareItButton)).toBeVisible();
+  });
+
+  test("Should publish link with auto-populated title from URL metadata", async ({
+    page,
+  }) => {
+    await page.goto(`${CREATE_URL}?tab=link`);
+
+    // Enter a URL and wait for metadata to auto-populate title
+    await page.locator(SELECTORS.linkUrlInput).fill("https://example.com");
+
+    // Wait for metadata to be fetched and title to auto-populate
+    const titleInput = page.locator(SELECTORS.linkTitleInput);
+    await expect(titleInput).not.toHaveValue("", { timeout: 10000 });
+
+    // Verify the title was auto-populated
+    const titleValue = await titleInput.inputValue();
+    expect(titleValue.length).toBeGreaterThan(0);
+
+    // Click Publish button in nav
+    await page.locator('nav button:has-text("Publish")').click();
+
+    // Should show link-specific modal text (not an error)
+    await expect(page.locator('text="Spread the word!"')).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Click Share it! to publish
+    await page.locator(SELECTORS.shareItButton).click();
+
+    // Wait for publish to complete - should redirect to post page
+    // The redirect URL pattern is /{username}/{slug}
+    await page.waitForURL((url) => !url.pathname.includes("/create"), {
+      timeout: 15000,
+    });
+
+    // Verify we're on the published post page
+    await expect(page.locator("h1")).toBeVisible({ timeout: 10000 });
+  });
+
+  test("Should publish and redirect to article page", async ({ page }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter valid content
+    const title = `E2E Publish Test ${Date.now()}`;
+    await page.locator(SELECTORS.titleInput).fill(title);
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type(articleContent);
+
+    // Wait for state to update
+    await page.waitForTimeout(500);
+
+    // Publish
+    await page.locator('nav button:has-text("Publish")').click();
+    await page.locator(SELECTORS.letsDoThisButton).click();
+
+    // Should redirect to article page
+    await page.waitForURL(/.*e2e-test-user-one-111\/e2e-publish-test.*/, {
+      timeout: 20000,
+    });
+
+    // Article should be visible
+    await expect(page.getByRole("heading", { name: title })).toBeVisible({
+      timeout: 10000,
+    });
+  });
+
+  test("Should show schedule-specific modal text when scheduling", async ({
+    page,
+  }) => {
+    await page.goto(CREATE_URL);
+
+    // Enter valid content - longer body for proper validation
+    await page.locator(SELECTORS.titleInput).fill("Scheduled Article Title");
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type(
+      "Content for scheduled article test here with enough text to pass validation",
+    );
+
+    // Wait for body content to register (debounce)
+    await page.waitForTimeout(2000);
+
+    // Expand More Options
+    await page.locator(SELECTORS.moreOptionsButton).click();
+
+    // Wait for accordion to expand
+    await expect(page.locator(SELECTORS.scheduleSwitch)).toBeVisible();
+
+    // Click the schedule switch using force to ensure it toggles
+    await page.locator(SELECTORS.scheduleSwitch).click({ force: true });
+
+    // Verify the switch is now checked
+    await expect(page.locator(SELECTORS.scheduleSwitch)).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
+
+    // Set a future date - wait for datetime input to appear
+    await expect(page.locator(SELECTORS.datetimeInput)).toBeVisible();
+    const futureDate = new Date();
+    futureDate.setDate(futureDate.getDate() + 1);
+    const dateString = futureDate.toISOString().slice(0, 16);
+    await page.locator(SELECTORS.datetimeInput).fill(dateString);
+
+    // Wait for state to update
+    await page.waitForTimeout(500);
+
+    // Click Publish button in nav
+    await page.locator('nav button:has-text("Publish")').click();
+
+    // Should show scheduling-specific modal
+    await expect(page.locator('text="Time travel activated!"')).toBeVisible({
+      timeout: 5000,
+    });
+  });
+});
+
+// ============================================
+// MOBILE RESPONSIVE TESTS
+// ============================================
+test.describe("Mobile Responsive Tests", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
+
+  test("Should show editor on mobile viewport", async ({ page }) => {
+    // Set mobile viewport
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto(CREATE_URL);
+
+    // Editor should be visible
+    await expect(page.locator(SELECTORS.titleInput)).toBeVisible();
+    await expect(page.locator(SELECTORS.editorContent)).toBeVisible();
+  });
+
+  test("Tab switching should work on mobile", async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto(CREATE_URL);
+
+    // Switch to Link tab
+    await page.locator(SELECTORS.linkTab).click();
+    await expect(page.locator(SELECTORS.linkUrlInput)).toBeVisible();
+
+    // Switch back to Write
+    await page.locator(SELECTORS.writeTab).click();
+    await expect(page.locator(SELECTORS.editorContent)).toBeVisible();
+  });
+
+  test("Publish button should be visible on mobile", async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto(CREATE_URL);
+
+    // Enter content
+    await page.locator(SELECTORS.titleInput).fill("Mobile Test Title");
+    await page.locator(SELECTORS.editorContent).click();
+    await page.keyboard.type("Mobile test content here for testing purposes");
+
+    // Wait for state to update
+    await page.waitForTimeout(500);
+
+    // Publish button in nav should be visible
+    await expect(page.locator('nav button:has-text("Publish")')).toBeVisible();
+  });
+});
diff --git a/e2e/setup.ts b/e2e/setup.ts
index 360a54b1..8a1398e8 100644
--- a/e2e/setup.ts
+++ b/e2e/setup.ts
@@ -46,6 +46,9 @@ export const setup = async () => {
       "e2e-css-grid-vs-flexbox",
       "e2e-react-hooks-explained",
       "e2e-web-accessibility-fundamentals",
+      // Link post slugs
+      "e2e-link-published",
+      "e2e-link-draft",
     ];
 
     for (const slugPattern of e2eSlugs) {
@@ -197,6 +200,37 @@ export const setup = async () => {
         authorId: authorId,
         showComments: true,
       },
+      // Link posts for testing
+      {
+        type: "link" as const,
+        title: "Codú GitHub Repository",
+        slug: "e2e-link-published",
+        excerpt: "The open-source repository for Codú - a space for coders.",
+        body: "", // Link posts don't have body content
+        externalUrl: "https://github.com/codu-code/codu",
+        upvotesCount: 15,
+        downvotesCount: 0,
+        readingTime: 1,
+        status: "published" as const,
+        publishedAt: now,
+        authorId: authorId,
+        showComments: true,
+      },
+      {
+        type: "link" as const,
+        title: "Draft Link Post for Testing",
+        slug: "e2e-link-draft",
+        excerpt: "A draft link post used for E2E testing.",
+        body: "",
+        externalUrl: "https://www.codu.co",
+        upvotesCount: 0,
+        downvotesCount: 0,
+        readingTime: 1,
+        status: "draft" as const,
+        publishedAt: null,
+        authorId: authorId,
+        showComments: true,
+      },
     ];
 
     // Insert articles into new posts table
@@ -206,7 +240,9 @@ export const setup = async () => {
       .onConflictDoNothing()
       .returning();
 
-    console.log(`Created ${insertedPosts.length} E2E test articles`);
+    console.log(
+      `Created ${insertedPosts.length} E2E test posts (articles + links)`,
+    );
 
     // Find the published article to add a comment
     const publishedPost = insertedPosts.find(
diff --git a/e2e/utils/utils.ts b/e2e/utils/utils.ts
index 91f18081..9992e082 100644
--- a/e2e/utils/utils.ts
+++ b/e2e/utils/utils.ts
@@ -92,6 +92,20 @@ interface CreateArticleInput {
   authorId?: string;
 }
 
+// Interface for creating link posts
+interface CreateLinkPostInput {
+  title: string;
+  slug: string;
+  externalUrl: string;
+  excerpt?: string;
+  upvotesCount?: number;
+  downvotesCount?: number;
+  readingTime?: number;
+  status?: "draft" | "published" | "scheduled" | "unlisted";
+  publishedAt?: string | null;
+  authorId?: string;
+}
+
 export async function createArticle({
   title,
   slug,
@@ -132,3 +146,45 @@ export async function createArticle({
     throw Error(`Error while creating E2E test article: ${err}`);
   }
 }
+
+export async function createLinkPost({
+  title,
+  slug,
+  externalUrl,
+  excerpt = "",
+  upvotesCount = 0,
+  downvotesCount = 0,
+  readingTime = 1,
+  status = "draft",
+  publishedAt = null,
+  authorId = E2E_USER_ONE_ID,
+}: CreateLinkPostInput) {
+  const db = drizzle(
+    postgres("postgresql://postgres:secret@127.0.0.1:5432/postgres"),
+  );
+
+  try {
+    const result = await db
+      .insert(posts)
+      .values({
+        type: "link",
+        title,
+        slug,
+        excerpt,
+        body: "", // Link posts don't have body content
+        externalUrl,
+        upvotesCount,
+        downvotesCount,
+        readingTime,
+        status,
+        publishedAt,
+        authorId,
+        showComments: true,
+      })
+      .onConflictDoNothing()
+      .returning();
+    return result[0];
+  } catch (err) {
+    throw Error(`Error while creating E2E test link post: ${err}`);
+  }
+}

From 9878e30682152c64124e16cb86956337cebdba24 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 16:41:59 +0000
Subject: [PATCH 15/19] feat: add link post support and UI improvements

  - Add user link detail page and fetch-metadata API route
  - Add NewsletterCTA component
  - Update draft preview page with improved layout
  - Update feed, articles, and homepage clients
  - Improve header, sidebar, and content layout components
  - Update comments area and unified content card
  - Minor fixes to Search, listbox, and fallback media components
---
 .../[username]/[slug]/_userLinkDetail.tsx     | 389 ++++++++++++++++++
 app/(app)/[username]/[slug]/page.tsx          | 107 +++++
 app/(app)/articles/_client.tsx                |   4 +-
 app/(app)/draft/[id]/page.tsx                 |  75 +++-
 app/(app)/feed/_client.tsx                    |  12 +-
 app/(app)/jobs/create/_client.tsx             |   6 +-
 app/(app)/page.tsx                            |  26 +-
 app/api/fetch-metadata/route.ts               | 253 ++++++++++++
 app/global-error.tsx                          |   2 +-
 components/Comments/CommentsArea.tsx          |   2 +-
 components/ContentDetail/Layout.tsx           |   2 +-
 components/Header/MinimalHeader.tsx           |   1 -
 components/NewsletterCTA/NewsletterCTA.tsx    |  79 ++++
 components/SideBar/AppSidebar.tsx             |  22 +-
 .../UnifiedContentCard/UnifiedContentCard.tsx |  13 +-
 .../FallbackMedia/FallbackMedia.tsx           |   2 +-
 components/ui-components/listbox.tsx          |   2 +-
 components/ui-components/sidebar-layout.tsx   |  21 +-
 components/ui-components/sidebar.tsx          |   4 +-
 components/ui/Search.tsx                      |   2 +-
 20 files changed, 961 insertions(+), 63 deletions(-)
 create mode 100644 app/(app)/[username]/[slug]/_userLinkDetail.tsx
 create mode 100644 app/api/fetch-metadata/route.ts
 create mode 100644 components/NewsletterCTA/NewsletterCTA.tsx

diff --git a/app/(app)/[username]/[slug]/_userLinkDetail.tsx b/app/(app)/[username]/[slug]/_userLinkDetail.tsx
new file mode 100644
index 00000000..49e748a5
--- /dev/null
+++ b/app/(app)/[username]/[slug]/_userLinkDetail.tsx
@@ -0,0 +1,389 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import Link from "next/link";
+import {
+  ArrowTopRightOnSquareIcon,
+  ChatBubbleLeftIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  ShareIcon,
+} from "@heroicons/react/20/solid";
+import { api } from "@/server/trpc/react";
+import { toast } from "sonner";
+import { Temporal } from "@js-temporal/polyfill";
+import DiscussionArea from "@/components/Discussion/DiscussionArea";
+import { useSession, signIn } from "next-auth/react";
+import { InlineAuthorBio } from "@/components/ContentDetail";
+
+type Props = {
+  username: string;
+  contentSlug: string;
+};
+
+// Get favicon URL from a website
+const getFaviconUrl = (
+  websiteUrl: string | null | undefined,
+): string | null => {
+  if (!websiteUrl) return null;
+  try {
+    const url = new URL(websiteUrl);
+    return `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=32`;
+  } catch {
+    return null;
+  }
+};
+
+// Get hostname from URL
+const getHostname = (urlString: string): string => {
+  try {
+    const url = new URL(urlString);
+    return url.hostname;
+  } catch {
+    return urlString;
+  }
+};
+
+// Ensure image URL uses https
+const ensureHttps = (url: string | null | undefined): string | null => {
+  if (!url) return null;
+  if (url.startsWith("http://")) {
+    return url.replace("http://", "https://");
+  }
+  return url;
+};
+
+const UserLinkDetail = ({ username, contentSlug }: Props) => {
+  const { data: session } = useSession();
+  const { data: linkContent, status } = api.content.getUserLinkBySlug.useQuery({
+    username,
+    slug: contentSlug,
+  });
+
+  const { data: discussionCount } =
+    api.discussion.getContentDiscussionCount.useQuery(
+      { contentId: linkContent?.id ?? "" },
+      { enabled: !!linkContent?.id },
+    );
+
+  // Vote state management - derive initial values from query data
+  const initialVoteState = useMemo(
+    () => ({
+      userVote: linkContent?.userVote ?? null,
+      upvotes: linkContent?.upvotes ?? 0,
+      downvotes: linkContent?.downvotes ?? 0,
+    }),
+    [linkContent?.userVote, linkContent?.upvotes, linkContent?.downvotes],
+  );
+
+  const [userVote, setUserVote] = useState<"up" | "down" | null>(
+    initialVoteState.userVote,
+  );
+  const [votes, setVotes] = useState({
+    upvotes: initialVoteState.upvotes,
+    downvotes: initialVoteState.downvotes,
+  });
+
+  // Sync state when server data changes
+  const currentUserVote = linkContent?.userVote ?? null;
+  const currentUpvotes = linkContent?.upvotes ?? 0;
+  const currentDownvotes = linkContent?.downvotes ?? 0;
+
+  const serverVoteKey = `${currentUserVote}-${currentUpvotes}-${currentDownvotes}`;
+  const [lastSyncedKey, setLastSyncedKey] = useState(serverVoteKey);
+
+  if (serverVoteKey !== lastSyncedKey && linkContent) {
+    setUserVote(currentUserVote);
+    setVotes({ upvotes: currentUpvotes, downvotes: currentDownvotes });
+    setLastSyncedKey(serverVoteKey);
+  }
+
+  const { mutate: vote, status: voteStatus } = api.content.vote.useMutation({
+    onMutate: async ({ voteType }) => {
+      const oldVote = userVote;
+      setUserVote(voteType);
+      setVotes((prev) => {
+        let newUpvotes = prev.upvotes;
+        let newDownvotes = prev.downvotes;
+        if (oldVote === "up") newUpvotes--;
+        if (oldVote === "down") newDownvotes--;
+        if (voteType === "up") newUpvotes++;
+        if (voteType === "down") newDownvotes++;
+        return { upvotes: newUpvotes, downvotes: newDownvotes };
+      });
+    },
+    onError: () => {
+      setUserVote(linkContent?.userVote ?? null);
+      setVotes({
+        upvotes: linkContent?.upvotes ?? 0,
+        downvotes: linkContent?.downvotes ?? 0,
+      });
+      toast.error("Failed to update vote");
+    },
+  });
+
+  const handleVote = (voteType: "up" | "down" | null) => {
+    if (!session) {
+      signIn();
+      return;
+    }
+    if (!linkContent) return;
+    vote({ contentId: linkContent.id, voteType });
+  };
+
+  const handleShare = async () => {
+    const shareUrl = `${window.location.origin}/${username}/${contentSlug}`;
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      toast.success("Link copied to clipboard");
+    } catch {
+      toast.error("Failed to copy link");
+    }
+  };
+
+  if (status === "pending") {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-8">
+        <div className="animate-pulse">
+          <div className="mb-4 h-6 w-24 rounded bg-neutral-200 dark:bg-neutral-700" />
+          <div className="mb-4 h-4 w-48 rounded bg-neutral-200 dark:bg-neutral-700" />
+          <div className="mb-2 h-8 w-full rounded bg-neutral-200 dark:bg-neutral-700" />
+          <div className="mb-4 h-8 w-3/4 rounded bg-neutral-200 dark:bg-neutral-700" />
+          <div className="mb-6 h-20 w-full rounded bg-neutral-200 dark:bg-neutral-700" />
+          <div className="h-12 w-full rounded bg-neutral-200 dark:bg-neutral-700" />
+        </div>
+      </div>
+    );
+  }
+
+  if (status === "error" || !linkContent) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-8">
+        <Link
+          href="/feed"
+          className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+        >
+          Back to Feed
+        </Link>
+        <div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center dark:border-red-800 dark:bg-red-950">
+          <h1 className="text-lg font-semibold text-red-700 dark:text-red-300">
+            Content Not Found
+          </h1>
+          <p className="mt-2 text-sm text-red-600 dark:text-red-400">
+            This link may have been removed or the URL is invalid.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const externalUrl = linkContent.externalUrl || "";
+  const dateTime = linkContent.publishedAt
+    ? Temporal.Instant.from(new Date(linkContent.publishedAt).toISOString())
+    : null;
+  const readableDate = dateTime
+    ? dateTime.toLocaleString(["en-IE"], {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+    : null;
+
+  const faviconUrl = getFaviconUrl(externalUrl);
+  const hostname = externalUrl ? getHostname(externalUrl) : null;
+  const score = votes.upvotes - votes.downvotes;
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8">
+      {/* Breadcrumb */}
+      <nav className="mb-6 flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400">
+        <Link
+          href="/feed"
+          className="hover:text-neutral-700 dark:hover:text-neutral-200"
+        >
+          Feed
+        </Link>
+        <span aria-hidden="true">/</span>
+        <Link
+          href={`/${username}`}
+          className="hover:text-neutral-700 dark:hover:text-neutral-200"
+        >
+          {linkContent.author?.name || username}
+        </Link>
+      </nav>
+
+      {/* Content card */}
+      <article className="rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-700 dark:bg-neutral-900">
+        {/* Author info */}
+        <div className="mb-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-neutral-500 dark:text-neutral-400">
+          <Link
+            href={`/${username}`}
+            className="flex items-center gap-2 hover:text-neutral-700 dark:hover:text-neutral-200"
+          >
+            {linkContent.author?.image ? (
+              <img
+                src={linkContent.author.image}
+                alt=""
+                className="h-5 w-5 rounded-full object-cover"
+              />
+            ) : (
+              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-100 text-xs font-bold text-orange-600 dark:bg-orange-900 dark:text-orange-300">
+                {linkContent.author?.name?.charAt(0).toUpperCase() || "?"}
+              </div>
+            )}
+            <span className="font-medium">
+              {linkContent.author?.name || "Unknown"}
+            </span>
+          </Link>
+          {readableDate && (
+            <>
+              <span aria-hidden="true">·</span>
+              <time dateTime={dateTime?.toString()}>{readableDate}</time>
+            </>
+          )}
+          {hostname && (
+            <>
+              <span aria-hidden="true">·</span>
+              <span className="text-neutral-400">{hostname}</span>
+            </>
+          )}
+        </div>
+
+        {/* Title */}
+        <h1 className="mb-3 text-2xl font-bold leading-tight text-neutral-900 dark:text-neutral-100 md:text-3xl">
+          {linkContent.title}
+        </h1>
+
+        {/* Excerpt */}
+        {linkContent.excerpt && (
+          <p className="mb-4 text-neutral-600 dark:text-neutral-400">
+            {linkContent.excerpt}
+          </p>
+        )}
+
+        {/* Thumbnail image */}
+        {ensureHttps(linkContent.coverImage) && externalUrl && (
+          <a
+            href={externalUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="relative mb-4 block overflow-hidden rounded-lg"
+          >
+            <img
+              src={ensureHttps(linkContent.coverImage)!}
+              alt=""
+              className="w-full object-cover transition-opacity hover:opacity-90"
+              style={{ maxHeight: "400px" }}
+            />
+            {hostname && (
+              <div className="absolute bottom-2 right-2 rounded bg-black/60 px-2 py-1 text-xs text-white">
+                <ArrowTopRightOnSquareIcon className="mr-1 inline h-3.5 w-3.5" />
+                {hostname}
+              </div>
+            )}
+          </a>
+        )}
+
+        {/* Visit link CTA */}
+        {externalUrl && hostname && (
+          <a
+            href={externalUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center gap-2 rounded-lg bg-orange-500 px-6 py-3 font-medium text-white transition-colors hover:bg-orange-600"
+          >
+            <ArrowTopRightOnSquareIcon className="h-5 w-5" />
+            Visit Link at {hostname}
+          </a>
+        )}
+
+        {/* Inline author bio */}
+        {linkContent.author && (
+          <div className="mt-8">
+            <InlineAuthorBio
+              name={linkContent.author.name || "Unknown"}
+              username={linkContent.author.username || ""}
+              image={linkContent.author.image}
+              bio={linkContent.author.bio}
+            />
+          </div>
+        )}
+
+        {/* Action bar - just above discussion */}
+        <div className="mt-8 flex flex-wrap items-center gap-2">
+          {/* Vote buttons */}
+          <div className="flex items-center rounded-full border border-neutral-200 dark:border-neutral-700">
+            <button
+              onClick={() => handleVote(userVote === "up" ? null : "up")}
+              disabled={voteStatus === "pending"}
+              className={`rounded-l-full p-2 transition-colors hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-neutral-800 ${
+                userVote === "up"
+                  ? "text-green-500"
+                  : "text-neutral-400 dark:text-neutral-500"
+              }`}
+              aria-label="Upvote"
+            >
+              <ChevronUpIcon className="h-5 w-5" />
+            </button>
+            <span
+              className={`min-w-[2rem] text-center text-sm font-semibold ${
+                score > 0
+                  ? "text-green-500"
+                  : score < 0
+                    ? "text-red-500"
+                    : "text-neutral-400 dark:text-neutral-500"
+              }`}
+            >
+              {score}
+            </span>
+            <button
+              onClick={() => handleVote(userVote === "down" ? null : "down")}
+              disabled={voteStatus === "pending"}
+              className={`rounded-r-full p-2 transition-colors hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-neutral-800 ${
+                userVote === "down"
+                  ? "text-red-500"
+                  : "text-neutral-400 dark:text-neutral-500"
+              }`}
+              aria-label="Downvote"
+            >
+              <ChevronDownIcon className="h-5 w-5" />
+            </button>
+          </div>
+
+          {/* Comments count */}
+          <a
+            href="#discussion"
+            className="flex items-center gap-1.5 rounded-full bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700"
+          >
+            <ChatBubbleLeftIcon className="h-4 w-4" />
+            <span>{discussionCount ?? 0} comments</span>
+          </a>
+
+          {/* Share button */}
+          <button
+            onClick={handleShare}
+            className="flex items-center gap-1.5 rounded-full bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700"
+          >
+            <ShareIcon className="h-4 w-4" />
+            Share
+          </button>
+        </div>
+
+        {/* Discussion section */}
+        <section id="discussion" className="mt-8">
+          {linkContent.showComments ? (
+            <DiscussionArea contentId={linkContent.id} noWrapper />
+          ) : (
+            <div className="py-4">
+              <p className="italic text-neutral-500 dark:text-neutral-400">
+                Comments are disabled for this link
+              </p>
+            </div>
+          )}
+        </section>
+      </article>
+    </div>
+  );
+};
+
+export default UserLinkDetail;
diff --git a/app/(app)/[username]/[slug]/page.tsx b/app/(app)/[username]/[slug]/page.tsx
index 5ac3dcb9..94664b55 100644
--- a/app/(app)/[username]/[slug]/page.tsx
+++ b/app/(app)/[username]/[slug]/page.tsx
@@ -23,6 +23,7 @@ import { posts, user, feed_sources, post_tags, tag } from "@/server/db/schema";
 import { eq, and, lte } from "drizzle-orm";
 import FeedArticleContent from "./_feedArticleContent";
 import LinkContentDetail from "./_linkContentDetail";
+import UserLinkDetail from "./_userLinkDetail";
 
 type Props = { params: Promise<{ username: string; slug: string }> };
 
@@ -101,6 +102,82 @@ async function getUserPost(username: string, postSlug: string) {
   };
 }
 
+// Helper to fetch user-created link post by username and slug (user shared a link)
+async function getUserLinkPost(username: string, postSlug: string) {
+  const userRecord = await db.query.user.findFirst({
+    columns: { id: true },
+    where: eq(user.username, username),
+  });
+
+  if (!userRecord) return null;
+
+  // Find published link post by slug that belongs to this user (no sourceId)
+  const linkPostResults = await db
+    .select({
+      id: posts.id,
+      title: posts.title,
+      body: posts.body,
+      excerpt: posts.excerpt,
+      slug: posts.slug,
+      externalUrl: posts.externalUrl,
+      coverImage: posts.coverImage,
+      status: posts.status,
+      publishedAt: posts.publishedAt,
+      updatedAt: posts.updatedAt,
+      readingTime: posts.readingTime,
+      showComments: posts.showComments,
+      upvotesCount: posts.upvotesCount,
+      downvotesCount: posts.downvotesCount,
+      type: posts.type,
+      // Author info via JOIN
+      authorId: user.id,
+      authorName: user.name,
+      authorImage: user.image,
+      authorUsername: user.username,
+      authorBio: user.bio,
+    })
+    .from(posts)
+    .leftJoin(user, eq(posts.authorId, user.id))
+    .where(
+      and(
+        eq(posts.slug, postSlug),
+        eq(posts.authorId, userRecord.id),
+        eq(posts.status, "published"),
+        eq(posts.type, "link"),
+        lte(posts.publishedAt, new Date().toISOString()),
+      ),
+    )
+    .limit(1);
+
+  if (linkPostResults.length === 0) return null;
+
+  const linkPost = linkPostResults[0];
+
+  // Fetch tags separately using explicit JOIN
+  const tagsResult = await db
+    .select({ title: tag.title })
+    .from(post_tags)
+    .innerJoin(tag, eq(post_tags.tagId, tag.id))
+    .where(eq(post_tags.postId, linkPost.id));
+
+  // Map to expected shape
+  return {
+    ...linkPost,
+    published: linkPost.publishedAt,
+    readTimeMins: linkPost.readingTime,
+    upvotes: linkPost.upvotesCount,
+    downvotes: linkPost.downvotesCount,
+    tags: tagsResult.map((t) => ({ tag: { title: t.title } })),
+    user: {
+      id: linkPost.authorId,
+      name: linkPost.authorName,
+      image: linkPost.authorImage,
+      username: linkPost.authorUsername,
+      bio: linkPost.authorBio,
+    },
+  };
+}
+
 // Helper to fetch link post by source slug and article slug (uses new posts table)
 async function getFeedArticle(
   sourceSlug: string,
@@ -257,6 +334,28 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
     };
   }
 
+  // Try user-created link post (user shared a link)
+  const userLinkPost = await getUserLinkPost(username, slug);
+  if (userLinkPost && userLinkPost.user) {
+    const host = (await headers()).get("host") || "";
+    const linkAuthorName = userLinkPost.user.name || "Unknown";
+
+    return {
+      title: `${userLinkPost.title} | shared by ${linkAuthorName} | Codú`,
+      authors: {
+        name: linkAuthorName,
+        url: `https://www.${host}/${userLinkPost.user.username}`,
+      },
+      description: userLinkPost.excerpt || `Link shared by ${linkAuthorName}`,
+      openGraph: {
+        title: userLinkPost.title,
+        description: userLinkPost.excerpt || `Link shared by ${linkAuthorName}`,
+        images: userLinkPost.coverImage ? [userLinkPost.coverImage] : undefined,
+        siteName: "Codú",
+      },
+    };
+  }
+
   // Then try feed article (legacy aggregated_article table)
   const feedArticle = await getFeedArticle(username, slug);
   if (feedArticle) {
@@ -662,6 +761,14 @@ const UnifiedPostPage = async (props: Props) => {
     );
   }
 
+  // Try user-created link post (user shared a link)
+  const userLinkPost = await getUserLinkPost(username, slug);
+
+  if (userLinkPost && userLinkPost.user) {
+    // Render user link post
+    return <UserLinkDetail username={username} contentSlug={slug} />;
+  }
+
   // Then try feed article (legacy aggregated_article table)
   const feedArticle = await getFeedArticle(username, slug);
 
diff --git a/app/(app)/articles/_client.tsx b/app/(app)/articles/_client.tsx
index 280ed572..4fa3d6c1 100644
--- a/app/(app)/articles/_client.tsx
+++ b/app/(app)/articles/_client.tsx
@@ -26,7 +26,7 @@ import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
 import { useSession, signIn } from "next-auth/react";
 import { getCamelCaseFromLower } from "@/utils/utils";
 import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";
-import CoduChallenge from "@/components/CoduChallenge/CoduChallenge";
+import NewsletterCTA from "@/components/NewsletterCTA/NewsletterCTA";
 import { toast } from "sonner";
 import * as Sentry from "@sentry/nextjs";
 import { FeedFilters } from "@/components/Feed";
@@ -523,7 +523,7 @@ const ArticlesPage = () => {
             </section>
           </div>
           <section className="col-span-5 hidden lg:block">
-            <CoduChallenge />
+            <NewsletterCTA isSubscribed={session?.user?.newsletter} />
             <h3 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
               Popular topics
             </h3>
diff --git a/app/(app)/draft/[id]/page.tsx b/app/(app)/draft/[id]/page.tsx
index ff6c0944..18fb3e79 100644
--- a/app/(app)/draft/[id]/page.tsx
+++ b/app/(app)/draft/[id]/page.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import Markdoc from "@markdoc/markdoc";
 import Link from "next/link";
-import BioBar from "@/components/BioBar/BioBar";
 import { markdocComponents } from "@/markdoc/components";
 import { config } from "@/markdoc/config";
 import { headers } from "next/headers";
 import { notFound } from "next/navigation";
-
+import { InlineAuthorBio } from "@/components/ContentDetail";
 import { type Metadata } from "next";
 import { getPostPreview } from "@/server/lib/posts";
 import { getCamelCaseFromLower } from "@/utils/utils";
@@ -24,7 +23,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
   return {
     title: `Draft: ${post.title} | by ${post.user.name} | Codú`,
     authors: {
-      name: post.user.name,
+      name: post.user.name ?? undefined,
       url: `https://www.${host}/${post.user.username}`,
     },
     description: post.excerpt,
@@ -45,24 +44,61 @@ const PreviewPage = async (props: Props) => {
     notFound();
   }
 
-  const ast = Markdoc.parse(post.body);
+  const ast = Markdoc.parse(post.body || "");
   const content = Markdoc.transform(ast, config);
 
   return (
-    <>
-      <div className="mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl">
-        <article className="prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg">
+    <div className="mx-auto max-w-3xl px-4 py-8">
+      {/* Draft indicator */}
+      <nav className="mb-6 flex items-center gap-2 text-sm">
+        <span className="rounded-full bg-pink-100 px-3 py-1 font-medium text-pink-600 dark:bg-pink-900/30 dark:text-pink-400">
+          Draft Preview
+        </span>
+      </nav>
+
+      {/* Article card - matches published article layout */}
+      <article className="rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-700 dark:bg-neutral-900">
+        {/* Author info */}
+        <div className="mb-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-neutral-500 dark:text-neutral-400">
+          <Link
+            href={`/${post.user.username}`}
+            className="flex items-center gap-2 hover:text-neutral-700 dark:hover:text-neutral-200"
+          >
+            {post.user.image ? (
+              <img
+                src={post.user.image}
+                alt=""
+                className="h-5 w-5 rounded-full object-cover"
+              />
+            ) : (
+              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-100 text-xs font-bold text-orange-600 dark:bg-orange-900 dark:text-orange-300">
+                {post.user.name?.charAt(0).toUpperCase() || "?"}
+              </div>
+            )}
+            <span className="font-medium">{post.user.name}</span>
+          </Link>
+          {post.readTimeMins && (
+            <>
+              <span aria-hidden="true">·</span>
+              <span>{post.readTimeMins} min read</span>
+            </>
+          )}
+        </div>
+
+        {/* Article content */}
+        <div className="prose mx-auto max-w-none dark:prose-invert lg:prose-lg">
           <h1>{post.title}</h1>
           {Markdoc.renderers.react(content, React, {
             components: markdocComponents,
           })}
-        </article>
+        </div>
+
+        {/* Tags */}
         {post.tags.length > 0 && (
-          <section className="flex flex-wrap gap-3">
+          <section className="mt-6 flex flex-wrap gap-3">
             {post.tags.map(({ tag }) => (
               <Link
-                // only reason this is toLowerCase is to make url look nicer. Not needed for functionality
-                href={`/articles?tag=${tag.title.toLowerCase()}`}
+                href={`/feed?tag=${tag.title.toLowerCase()}`}
                 key={tag.title}
                 className="rounded-full bg-gradient-to-r from-orange-400 to-pink-600 px-3 py-1 text-xs font-bold text-white hover:bg-pink-700"
               >
@@ -71,11 +107,18 @@ const PreviewPage = async (props: Props) => {
             ))}
           </section>
         )}
-      </div>
-      <div className="mx-auto max-w-3xl px-2 pb-4 sm:px-4">
-        <BioBar author={post.user} />
-      </div>
-    </>
+
+        {/* Compact inline author bio */}
+        <div className="mt-8">
+          <InlineAuthorBio
+            name={post.user.name || "Unknown"}
+            username={post.user.username || ""}
+            image={post.user.image}
+            bio={post.user.bio}
+          />
+        </div>
+      </article>
+    </div>
   );
 };
 
diff --git a/app/(app)/feed/_client.tsx b/app/(app)/feed/_client.tsx
index 1f85c27e..d4f1eede 100644
--- a/app/(app)/feed/_client.tsx
+++ b/app/(app)/feed/_client.tsx
@@ -9,6 +9,7 @@ import { useSession } from "next-auth/react";
 import { FeedItemLoading, FeedFilters } from "@/components/Feed";
 import { UnifiedContentCard } from "@/components/UnifiedContentCard";
 import { SavedItemCard } from "@/components/SavedItemCard";
+import NewsletterCTA from "@/components/NewsletterCTA/NewsletterCTA";
 
 type SortOption = "recent" | "trending" | "popular";
 type ContentType =
@@ -210,12 +211,17 @@ const FeedPage = () => {
                 About the Feed
               </h3>
               <p className="text-sm text-neutral-600 dark:text-neutral-400">
-                Curated developer content from across the web. Upvote articles you
-                find helpful, save them for later, and discover trending topics in
-                the developer community.
+                Curated developer content from across the web. Upvote articles
+                you find helpful, save them for later, and discover trending
+                topics in the developer community.
               </p>
             </div>
 
+            {/* Newsletter CTA */}
+            <div className="mt-6">
+              <NewsletterCTA isSubscribed={session?.user?.newsletter} />
+            </div>
+
             {/* Categories section */}
             <div className="mt-6">
               <h3 className="mb-4 text-2xl font-semibold leading-6 tracking-wide">
diff --git a/app/(app)/jobs/create/_client.tsx b/app/(app)/jobs/create/_client.tsx
index 7b49f23f..e59ac0ef 100644
--- a/app/(app)/jobs/create/_client.tsx
+++ b/app/(app)/jobs/create/_client.tsx
@@ -22,7 +22,8 @@ import {
 } from "@/components/ui-components/radio";
 import { Strong, Text } from "@/components/ui-components/text";
 import { Textarea } from "@/components/ui-components/textarea";
-import { saveJobsInput, saveJobsSchema } from "@/schema/job";
+import type { saveJobsInput} from "@/schema/job";
+import { saveJobsSchema } from "@/schema/job";
 import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
 import { uploadFile } from "@/utils/s3helpers";
 import { getUploadUrl } from "@/app/actions/getUploadUrl";
@@ -30,7 +31,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 import React, { useRef, useState } from "react";
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import type { SubmitHandler} from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import * as Sentry from "@sentry/nextjs";
 import { toast } from "sonner";
 
diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index 23e92bb5..7e32ad9e 100644
--- a/app/(app)/page.tsx
+++ b/app/(app)/page.tsx
@@ -7,7 +7,7 @@ import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
 import { getServerAuthSession } from "@/server/auth";
 import PopularTags from "@/components/PopularTags/PopularTags";
 import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";
-import CoduChallenge from "@/components/CoduChallenge/CoduChallenge";
+import NewsletterCTA from "@/components/NewsletterCTA/NewsletterCTA";
 
 const Home = async () => {
   const session = await getServerAuthSession();
@@ -52,20 +52,20 @@ const Home = async () => {
           </Suspense>
           <section className="col-span-5 hidden lg:block">
             <div className="sticky top-20">
-            <CoduChallenge />
-            <h4 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
-              Popular topics
-            </h4>
-            <div className="flex flex-wrap gap-2">
-              <Suspense fallback={<PopularTagsLoading />}>
-                <PopularTags />
-              </Suspense>
-            </div>
-            {session && (
+              <NewsletterCTA isSubscribed={session?.user?.newsletter} />
+              <h4 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
+                Popular topics
+              </h4>
               <div className="flex flex-wrap gap-2">
-                <SideBarSavedPosts />
+                <Suspense fallback={<PopularTagsLoading />}>
+                  <PopularTags />
+                </Suspense>
               </div>
-            )}
+              {session && (
+                <div className="flex flex-wrap gap-2">
+                  <SideBarSavedPosts />
+                </div>
+              )}
             </div>
           </section>
         </div>
diff --git a/app/api/fetch-metadata/route.ts b/app/api/fetch-metadata/route.ts
new file mode 100644
index 00000000..407ca922
--- /dev/null
+++ b/app/api/fetch-metadata/route.ts
@@ -0,0 +1,253 @@
+import type { NextRequest} from "next/server";
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+
+const FETCH_TIMEOUT_MS = 8000;
+const MAX_CONTENT_BYTES = 150000; // 150KB - enough to get meta tags
+
+interface UrlMetadata {
+  title: string | null;
+  description: string | null;
+  image: string | null;
+  readTime: number | null;
+  siteName: string | null;
+}
+
+/**
+ * Extract text content from HTML and count words
+ */
+function extractTextAndWordCount(html: string): number {
+  // Remove script and style tags
+  let text = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "");
+  text = text.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
+
+  // Remove all HTML tags
+  text = text.replace(/<[^>]+>/g, " ");
+
+  // Decode HTML entities
+  text = text.replace(/&nbsp;/g, " ");
+  text = text.replace(/&amp;/g, "&");
+  text = text.replace(/&lt;/g, "<");
+  text = text.replace(/&gt;/g, ">");
+  text = text.replace(/&quot;/g, '"');
+
+  // Normalize whitespace and count words
+  const words = text.split(/\s+/).filter((word) => word.length > 0);
+  return words.length;
+}
+
+/**
+ * Calculate reading time in minutes based on word count
+ * Average reading speed: ~225 words per minute
+ */
+function calculateReadTime(wordCount: number): number {
+  const readTime = Math.ceil(wordCount / 225);
+  // Clamp between 1 and 30 minutes
+  return Math.max(1, Math.min(30, readTime));
+}
+
+/**
+ * Extract metadata from HTML content
+ */
+function extractMetadata(html: string): UrlMetadata {
+  const result: UrlMetadata = {
+    title: null,
+    description: null,
+    image: null,
+    readTime: null,
+    siteName: null,
+  };
+
+  // Extract og:title or <title>
+  const ogTitlePatterns = [
+    /<meta[^>]+property=["']og:title["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:title["']/i,
+  ];
+
+  for (const pattern of ogTitlePatterns) {
+    const match = html.match(pattern);
+    if (match?.[1]) {
+      result.title = match[1].trim();
+      break;
+    }
+  }
+
+  // Fallback to <title> tag
+  if (!result.title) {
+    const titleMatch = html.match(/<title[^>]*>([^<]+)<\/title>/i);
+    if (titleMatch?.[1]) {
+      result.title = titleMatch[1].trim();
+    }
+  }
+
+  // Extract og:description or meta description
+  const descriptionPatterns = [
+    /<meta[^>]+property=["']og:description["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:description["']/i,
+    /<meta[^>]+name=["']description["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+name=["']description["']/i,
+  ];
+
+  for (const pattern of descriptionPatterns) {
+    const match = html.match(pattern);
+    if (match?.[1]) {
+      result.description = match[1].trim();
+      break;
+    }
+  }
+
+  // Extract og:image or twitter:image
+  const imagePatterns = [
+    /<meta[^>]+property=["']og:image["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:image["']/i,
+    /<meta[^>]+name=["']twitter:image["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+name=["']twitter:image["']/i,
+  ];
+
+  for (const pattern of imagePatterns) {
+    const match = html.match(pattern);
+    if (match?.[1]) {
+      let imageUrl = match[1].trim();
+      // Validate URL format
+      if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
+        result.image = imageUrl;
+        break;
+      }
+      // Handle protocol-relative URLs
+      if (imageUrl.startsWith("//")) {
+        result.image = `https:${imageUrl}`;
+        break;
+      }
+    }
+  }
+
+  // Extract og:site_name
+  const siteNamePatterns = [
+    /<meta[^>]+property=["']og:site_name["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:site_name["']/i,
+  ];
+
+  for (const pattern of siteNamePatterns) {
+    const match = html.match(pattern);
+    if (match?.[1]) {
+      result.siteName = match[1].trim();
+      break;
+    }
+  }
+
+  // Calculate read time from body content
+  const wordCount = extractTextAndWordCount(html);
+  if (wordCount > 0) {
+    result.readTime = calculateReadTime(wordCount);
+  }
+
+  return result;
+}
+
+/**
+ * Validate URL format
+ */
+function isValidUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+export async function POST(request: NextRequest) {
+  // Check authentication
+  const session = await auth();
+  if (!session?.user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const body = await request.json();
+    const { url } = body;
+
+    if (!url || typeof url !== "string") {
+      return NextResponse.json({ error: "URL is required" }, { status: 400 });
+    }
+
+    if (!isValidUrl(url)) {
+      return NextResponse.json(
+        { error: "Invalid URL format" },
+        { status: 400 },
+      );
+    }
+
+    // Fetch the URL with timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+    try {
+      const response = await fetch(url, {
+        signal: controller.signal,
+        headers: {
+          "User-Agent":
+            "Mozilla/5.0 (compatible; CoduBot/1.0; +https://codu.co)",
+          Accept: "text/html,application/xhtml+xml",
+        },
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        return NextResponse.json(
+          { error: `Failed to fetch URL: ${response.status}` },
+          { status: 502 },
+        );
+      }
+
+      // Read response body with size limit
+      const reader = response.body?.getReader();
+      if (!reader) {
+        return NextResponse.json(
+          { error: "Failed to read response" },
+          { status: 502 },
+        );
+      }
+
+      let html = "";
+      const decoder = new TextDecoder();
+
+      while (html.length < MAX_CONTENT_BYTES) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        html += decoder.decode(value, { stream: true });
+
+        // Early exit if we have </head> and </body> - enough for metadata
+        if (html.includes("</head>") && html.length > 50000) break;
+      }
+
+      reader.cancel();
+
+      // Extract metadata
+      const metadata = extractMetadata(html);
+
+      return NextResponse.json(metadata);
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+
+      if (fetchError instanceof Error && fetchError.name === "AbortError") {
+        return NextResponse.json(
+          { error: "Request timed out" },
+          { status: 504 },
+        );
+      }
+
+      return NextResponse.json(
+        { error: "Failed to fetch URL" },
+        { status: 502 },
+      );
+    }
+  } catch (error) {
+    console.error("Error in fetch-metadata:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/global-error.tsx b/app/global-error.tsx
index 8b756cd3..f67e2273 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -18,7 +18,7 @@ export default function GlobalError({
     <html lang="en">
       <body>
         {/* This is the default Next.js error component but it doesn't allow omitting the statusCode property yet. */}
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        { }
         <NextError statusCode={undefined as any} />
       </body>
     </html>
diff --git a/components/Comments/CommentsArea.tsx b/components/Comments/CommentsArea.tsx
index 587c626d..b7482238 100644
--- a/components/Comments/CommentsArea.tsx
+++ b/components/Comments/CommentsArea.tsx
@@ -184,7 +184,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
     return commentsArr.map((comment) => {
       const { body, createdAt, updatedAt, id, userVote, score, author } =
         comment;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+       
       const children = (comment as any).children;
       // Handle deleted comments (author is null)
       const name = author?.name || "[deleted]";
diff --git a/components/ContentDetail/Layout.tsx b/components/ContentDetail/Layout.tsx
index 8adf76db..b11361a7 100644
--- a/components/ContentDetail/Layout.tsx
+++ b/components/ContentDetail/Layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import Link from "next/link";
 
 interface BreadcrumbItem {
diff --git a/components/Header/MinimalHeader.tsx b/components/Header/MinimalHeader.tsx
index be8599e0..36ecfb42 100644
--- a/components/Header/MinimalHeader.tsx
+++ b/components/Header/MinimalHeader.tsx
@@ -201,7 +201,6 @@ export function MinimalHeader({
             </button>
           </>
         )}
-
       </div>
     </div>
   );
diff --git a/components/NewsletterCTA/NewsletterCTA.tsx b/components/NewsletterCTA/NewsletterCTA.tsx
new file mode 100644
index 00000000..9444f60f
--- /dev/null
+++ b/components/NewsletterCTA/NewsletterCTA.tsx
@@ -0,0 +1,79 @@
+interface NewsletterCTAProps {
+  isSubscribed?: boolean;
+}
+
+const NewsletterCTA = ({ isSubscribed = false }: NewsletterCTAProps) => {
+  return (
+    <div className="mb-8 mt-2 overflow-hidden rounded-lg border border-neutral-300 bg-gradient-to-br from-blue-600 to-pink-600 text-white shadow-lg dark:border-neutral-600">
+      <div className="p-6">
+        <h3 className="mb-2 text-2xl font-bold">Level up every week</h3>
+        <p className="mb-4 text-base opacity-95">
+          Join developers getting weekly curated content: top articles,
+          tutorials, and resources from the community.
+        </p>
+
+        <div className="mb-5 flex flex-wrap gap-2">
+          {["Articles", "Tutorials", "Resources"].map((item) => (
+            <span
+              key={item}
+              className="inline-flex items-center gap-1.5 rounded-full border border-white/30 bg-white/15 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur-sm"
+            >
+              <svg
+                className="h-3 w-3 text-green-400"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              {item}
+            </span>
+          ))}
+        </div>
+
+        {isSubscribed ? (
+          <button
+            disabled
+            className="flex w-full cursor-not-allowed items-center justify-center gap-2 rounded-lg bg-white/80 px-6 py-2.5 text-sm font-semibold text-pink-600"
+          >
+            <svg
+              className="h-4 w-4 text-green-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+            Subscribed
+          </button>
+        ) : (
+          <a
+            href="https://newsletter.codu.co/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center gap-2 rounded-lg bg-white px-6 py-2.5 text-sm font-semibold text-pink-600 transition-all hover:bg-pink-50 hover:shadow-md"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="h-4 w-4"
+            >
+              <path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" />
+              <path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" />
+            </svg>
+            Subscribe free
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NewsletterCTA;
diff --git a/components/SideBar/AppSidebar.tsx b/components/SideBar/AppSidebar.tsx
index 73855c58..f32ccd26 100644
--- a/components/SideBar/AppSidebar.tsx
+++ b/components/SideBar/AppSidebar.tsx
@@ -104,7 +104,9 @@ export function AppSidebar({ session, username }: AppSidebarProps) {
                     className={`!size-5 shrink-0 ${isActive(item.href) ? "text-neutral-800 dark:text-white" : "text-neutral-400"}`}
                   />
                 )}
-                <SidebarLabel className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>
+                <SidebarLabel
+                  className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}
+                >
                   {item.name}
                 </SidebarLabel>
               </SidebarItem>
@@ -116,7 +118,11 @@ export function AppSidebar({ session, username }: AppSidebarProps) {
           <>
             <SidebarDivider />
             <SidebarSection>
-              <SidebarHeading className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>Account</SidebarHeading>
+              <SidebarHeading
+                className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}
+              >
+                Account
+              </SidebarHeading>
               {sidebarUserNavigation.map((item) => {
                 const Icon = iconMap[item.icon as keyof typeof iconMap];
                 const href = getUserNavHref(
@@ -134,7 +140,9 @@ export function AppSidebar({ session, username }: AppSidebarProps) {
                         className={`!size-5 shrink-0 ${isActive(href) ? "text-neutral-800 dark:text-white" : "text-neutral-400"}`}
                       />
                     )}
-                    <SidebarLabel className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>
+                    <SidebarLabel
+                      className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}
+                    >
                       {item.name}
                     </SidebarLabel>
                   </SidebarItem>
@@ -146,7 +154,9 @@ export function AppSidebar({ session, username }: AppSidebarProps) {
 
         <SidebarSpacer />
 
-        <SidebarSection className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>
+        <SidebarSection
+          className={`transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}
+        >
           {sidebarFooterNav.map((item) => (
             <SidebarItem key={item.name} href={item.href}>
               <SidebarLabel className="text-xs text-neutral-500 dark:text-neutral-400">
@@ -157,7 +167,9 @@ export function AppSidebar({ session, username }: AppSidebarProps) {
         </SidebarSection>
       </SidebarBody>
 
-      <SidebarFooter className={`border-t-0 transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}>
+      <SidebarFooter
+        className={`border-t-0 transition-opacity duration-300 ${isCollapsed ? "opacity-0" : "opacity-100"}`}
+      >
         <div className="flex items-center justify-center gap-4 py-2">
           {socialLinks.map((item) => (
             <a
diff --git a/components/UnifiedContentCard/UnifiedContentCard.tsx b/components/UnifiedContentCard/UnifiedContentCard.tsx
index c9c40416..6dcd0371 100644
--- a/components/UnifiedContentCard/UnifiedContentCard.tsx
+++ b/components/UnifiedContentCard/UnifiedContentCard.tsx
@@ -143,12 +143,13 @@ const UnifiedContentCard = ({
   const imageUrl = ensureHttps(rawImageUrl);
 
   // Determine the URL for the card
+  // Priority: author (POST or user-created LINK) > source (aggregated LINK) > fallback
   const cardUrl =
-    type === "POST"
-      ? `/${author?.username || ""}/${slug || ""}`
+    author?.username && slug
+      ? `/${author.username}/${slug}` // User-created content (POST or LINK)
       : source?.slug && slug
-        ? `/${source.slug}/${slug}`
-        : `/feed/${id}`;
+        ? `/${source.slug}/${slug}` // Aggregated content with source
+        : `/feed/${id}`; // Fallback
 
   // Unified content voting mutation
   const { mutate: voteContent, status: voteStatus } =
@@ -242,8 +243,8 @@ const UnifiedContentCard = ({
     >
       {/* Meta info row */}
       <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
-        {/* Author/Source info */}
-        {type === "POST" && author ? (
+        {/* Author/Source info - show author for any content type with author */}
+        {author ? (
           <Link
             href={`/${author.username}`}
             className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
diff --git a/components/markdocNodes/FallbackMedia/FallbackMedia.tsx b/components/markdocNodes/FallbackMedia/FallbackMedia.tsx
index 3935e0f9..dca674b0 100644
--- a/components/markdocNodes/FallbackMedia/FallbackMedia.tsx
+++ b/components/markdocNodes/FallbackMedia/FallbackMedia.tsx
@@ -6,7 +6,7 @@ export function FallbackMedia(
   return (
     <div>
       {/* TODO Review this as it should have a title */}
-      {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
+      { }
       <iframe style={{ width: "100%", height: "300px" }} {...props} />
     </div>
   );
diff --git a/components/ui-components/listbox.tsx b/components/ui-components/listbox.tsx
index a892405e..feeee273 100644
--- a/components/ui-components/listbox.tsx
+++ b/components/ui-components/listbox.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-/* eslint-disable jsx-a11y/no-autofocus */
+ 
 
 import * as Headless from "@headlessui/react";
 import clsx from "clsx";
diff --git a/components/ui-components/sidebar-layout.tsx b/components/ui-components/sidebar-layout.tsx
index f95641da..a460da7e 100644
--- a/components/ui-components/sidebar-layout.tsx
+++ b/components/ui-components/sidebar-layout.tsx
@@ -6,8 +6,17 @@ import { NavbarItem } from "./navbar";
 
 function MenuIcon() {
   return (
-    <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true" fill="currentColor">
-      <path fillRule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
+    <svg
+      data-slot="icon"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"
+        clipRule="evenodd"
+      />
     </svg>
   );
 }
@@ -79,14 +88,12 @@ export function SidebarLayout({
       {/* Outer frame: animates width, has border */}
       <div
         data-collapsed={isCollapsed ? "true" : undefined}
-        className={`fixed top-16 bottom-0 left-0 z-30 max-lg:hidden border-r border-neutral-200 dark:border-neutral-800 transition-all duration-300 ease-in-out ${isCollapsed ? "w-16" : "w-64"}`}
+        className={`fixed bottom-0 left-0 top-16 z-30 border-r border-neutral-200 transition-all duration-300 ease-in-out dark:border-neutral-800 max-lg:hidden ${isCollapsed ? "w-16" : "w-64"}`}
       >
         {/* Middle: clips content */}
         <div className="h-full overflow-hidden">
           {/* Inner: fixed width, content doesn't move */}
-          <div className="w-64 h-full">
-            {sidebar}
-          </div>
+          <div className="h-full w-64">{sidebar}</div>
         </div>
       </div>
 
@@ -113,7 +120,7 @@ export function SidebarLayout({
 
       {/* Content */}
       <main
-        className={`flex flex-1 flex-col lg:min-w-0 lg:pt-16 transition-all duration-300 ease-in-out ${contentPadding}`}
+        className={`flex flex-1 flex-col transition-all duration-300 ease-in-out lg:min-w-0 lg:pt-16 ${contentPadding}`}
       >
         <div className="grow">{children}</div>
       </main>
diff --git a/components/ui-components/sidebar.tsx b/components/ui-components/sidebar.tsx
index dde04010..b8f76b3f 100644
--- a/components/ui-components/sidebar.tsx
+++ b/components/ui-components/sidebar.tsx
@@ -1,5 +1,5 @@
 "use client";
-/* eslint-disable jsx-a11y/heading-has-content */
+ 
 
 import * as Headless from "@headlessui/react";
 import clsx from "clsx";
@@ -92,7 +92,7 @@ export function SidebarDivider({
       {...props}
       className={clsx(
         className,
-        "my-4 border-t border-neutral-200 dark:border-neutral-800 -mx-3",
+        "-mx-3 my-4 border-t border-neutral-200 dark:border-neutral-800",
       )}
     />
   );
diff --git a/components/ui/Search.tsx b/components/ui/Search.tsx
index cca81d81..d1566dd8 100644
--- a/components/ui/Search.tsx
+++ b/components/ui/Search.tsx
@@ -366,7 +366,7 @@ function SearchDialog({
   const searchParams = useSearchParams();
 
   // Close dialog when pathname or searchParams change
-  // eslint-disable-next-line react-hooks/set-state-in-effect
+   
   useEffect(() => {
     setOpen(false);
   }, [pathname, searchParams, setOpen]);

From 6f3e8bc1738d4d46e0df93989cd441711c7eb85e Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 16:42:35 +0000
Subject: [PATCH 16/19] chore: misc updates and cleanup

  - Update auth.ts and next-auth types
  - Add SidebarContext for collapsible sidebar state
  - Add drizzle seed-sources script
  - Update comment router and posts lib
  - Update markdoc editor shortcuts and example tags
  - Remove unused CoduChallenge component
---
 auth.ts                                       |   1 +
 components/CoduChallenge/CoduChallenge.tsx    |  23 ----
 context/SidebarContext.tsx                    |   7 +-
 drizzle/seed-sources.ts                       |   4 +-
 markdoc/editor/shortcuts/shortcuts.markdoc.ts |   2 +-
 markdoc/tags/markdoc-example.markdoc.ts       |   3 +-
 server/api/router/comment.ts                  |   6 +-
 server/lib/posts.ts                           | 100 ++++++++++++------
 types/next-auth.d.ts                          |   2 +
 9 files changed, 80 insertions(+), 68 deletions(-)
 delete mode 100644 components/CoduChallenge/CoduChallenge.tsx

diff --git a/auth.ts b/auth.ts
index 49a771b6..18f1faf1 100644
--- a/auth.ts
+++ b/auth.ts
@@ -66,6 +66,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
       if (session.user) {
         session.user.id = user.id;
         session.user.role = user.role;
+        session.user.newsletter = user.newsletter;
       }
       return session;
     },
diff --git a/components/CoduChallenge/CoduChallenge.tsx b/components/CoduChallenge/CoduChallenge.tsx
deleted file mode 100644
index cd4d350d..00000000
--- a/components/CoduChallenge/CoduChallenge.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Link from "next/link";
-
-const CoduChallenge = () => {
-  return (
-    <div className="mb-8 mt-2 overflow-hidden rounded border border-neutral-300 bg-gradient-to-br from-blue-600 to-pink-600 text-white shadow-lg dark:border-neutral-600">
-      <div className="p-6">
-        <h3 className="mb-2 text-2xl font-bold">Ready for a challenge?</h3>
-        <p className="mb-4 text-lg">
-          Write 6 articles in 6 weeks, showcase your expertise, and win
-          exclusive Codú swag!
-        </p>
-        <Link
-          href="/articles/join-our-6-week-writing-challenge-quohtgqb"
-          className="flex items-center justify-center rounded bg-white px-6 py-2 text-sm font-semibold text-pink-600 transition-colors hover:bg-pink-100"
-        >
-          Find out more
-        </Link>
-      </div>
-    </div>
-  );
-};
-
-export default CoduChallenge;
diff --git a/context/SidebarContext.tsx b/context/SidebarContext.tsx
index 27d09a51..6ef5fda3 100644
--- a/context/SidebarContext.tsx
+++ b/context/SidebarContext.tsx
@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  createContext,
-  useContext,
-  useCallback,
-  type ReactNode,
-} from "react";
+import { createContext, useContext, useCallback, type ReactNode } from "react";
 import useLocalStorage from "@/hooks/useLocalStorage";
 
 interface SidebarContextValue {
diff --git a/drizzle/seed-sources.ts b/drizzle/seed-sources.ts
index 3fcb9702..47fe9971 100644
--- a/drizzle/seed-sources.ts
+++ b/drizzle/seed-sources.ts
@@ -422,7 +422,9 @@ const feedSourcesRaw = [
 ];
 
 async function seedFeedSources() {
-  console.log(`Seeding ${feedSourcesRaw.length} feed sources with bot users...`);
+  console.log(
+    `Seeding ${feedSourcesRaw.length} feed sources with bot users...`,
+  );
 
   let usersCreated = 0;
   let sourcesCreated = 0;
diff --git a/markdoc/editor/shortcuts/shortcuts.markdoc.ts b/markdoc/editor/shortcuts/shortcuts.markdoc.ts
index e5801187..e6882117 100644
--- a/markdoc/editor/shortcuts/shortcuts.markdoc.ts
+++ b/markdoc/editor/shortcuts/shortcuts.markdoc.ts
@@ -1,7 +1,7 @@
 // useCustomShortcuts.tsx
 import { useCallback } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { RefObject } from "react";
+import type { RefObject } from "react";
 
 type Shortcuts = {
   [name: string]: string;
diff --git a/markdoc/tags/markdoc-example.markdoc.ts b/markdoc/tags/markdoc-example.markdoc.ts
index cb7d1a63..de3385ee 100644
--- a/markdoc/tags/markdoc-example.markdoc.ts
+++ b/markdoc/tags/markdoc-example.markdoc.ts
@@ -1,4 +1,5 @@
-import { Node, Tag } from "@markdoc/markdoc";
+import type { Node} from "@markdoc/markdoc";
+import { Tag } from "@markdoc/markdoc";
 import Code from "../../components/markdocNodes/Code/Code";
 
 const markdocExample = {
diff --git a/server/api/router/comment.ts b/server/api/router/comment.ts
index 5aaa56ee..7248d7d8 100644
--- a/server/api/router/comment.ts
+++ b/server/api/router/comment.ts
@@ -690,7 +690,7 @@ export const commentRouter = createTRPCRouter({
 });
 
 // Shape a single comment for API response
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ 
 function shapeComment(comment: any) {
   const isDeleted = !!comment.deletedAt;
 
@@ -721,10 +721,10 @@ function shapeComment(comment: any) {
 }
 
 // Build tree structure from flat list of comments
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ 
 function buildCommentTree(rootComment: any, descendants: any[]) {
   // Create a map of id -> comment with children array
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   
   const commentMap = new Map<string, any>();
 
   // Initialize root
diff --git a/server/lib/posts.ts b/server/lib/posts.ts
index 3ec94b71..f80c9e2d 100644
--- a/server/lib/posts.ts
+++ b/server/lib/posts.ts
@@ -3,7 +3,15 @@ import { db } from "@/server/db/index";
 import * as Sentry from "@sentry/nextjs";
 import "server-only";
 import { z } from "zod";
-import { bookmark, post, posts, user, feed_sources } from "../db/schema";
+import {
+  bookmark,
+  post,
+  posts,
+  user,
+  feed_sources,
+  post_tags,
+  tag,
+} from "../db/schema";
 import { eq, and, isNotNull, lte, desc, sql } from "drizzle-orm";
 
 export const GetPostSchema = z.object({
@@ -73,43 +81,69 @@ export async function getPostPreview({ id }: GetPreview) {
   try {
     GetPreviewSchema.parse({ id });
 
-    const response = await db.query.post.findFirst({
-      columns: {
-        id: true,
-        title: true,
-        body: true,
-        published: true,
-        updatedAt: true,
-        readTimeMins: true,
-        slug: true,
-        excerpt: true,
-        canonicalUrl: true,
-        showComments: true,
-      },
-      where: (posts, { eq }) => eq(posts.id, id),
-      with: {
-        tags: {
-          columns: { id: true },
-          with: { tag: { columns: { title: true } } },
-        },
-        user: {
-          columns: {
-            name: true,
-            image: true,
-            username: true,
-            bio: true,
-            id: true,
-          },
-        },
-      },
-    });
+    // Use direct query with join instead of ORM relations
+    const result = await db
+      .select({
+        id: posts.id,
+        title: posts.title,
+        body: posts.body,
+        publishedAt: posts.publishedAt,
+        updatedAt: posts.updatedAt,
+        readingTime: posts.readingTime,
+        slug: posts.slug,
+        excerpt: posts.excerpt,
+        canonicalUrl: posts.canonicalUrl,
+        showComments: posts.showComments,
+        userName: user.name,
+        userImage: user.image,
+        userUsername: user.username,
+        userBio: user.bio,
+        userId: user.id,
+      })
+      .from(posts)
+      .leftJoin(user, eq(posts.authorId, user.id))
+      .where(eq(posts.id, id))
+      .limit(1);
 
-    if (!response) {
+    if (result.length === 0) {
       return null;
     }
 
-    return response;
+    const postData = result[0];
+
+    // Get tags separately
+    const postTags = await db
+      .select({
+        id: post_tags.id,
+        tagTitle: tag.title,
+      })
+      .from(post_tags)
+      .innerJoin(tag, eq(post_tags.tagId, tag.id))
+      .where(eq(post_tags.postId, id));
+
+    // Map to expected format for backward compatibility
+    return {
+      id: postData.id,
+      title: postData.title,
+      body: postData.body,
+      published: postData.publishedAt,
+      updatedAt: postData.updatedAt,
+      readTimeMins: postData.readingTime,
+      slug: postData.slug,
+      excerpt: postData.excerpt,
+      canonicalUrl: postData.canonicalUrl,
+      showComments: postData.showComments,
+      user: {
+        id: postData.userId,
+        name: postData.userName,
+        image: postData.userImage,
+        username: postData.userUsername,
+        bio: postData.userBio,
+      },
+      tags: postTags.map((pt) => ({ id: pt.id, tag: { title: pt.tagTitle } })),
+    };
   } catch (error) {
+    console.error("getPostPreview error:", error);
     Sentry.captureException(error);
     throw new Error("Error fetching post");
   }
diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts
index 1d5d4324..3031c047 100644
--- a/types/next-auth.d.ts
+++ b/types/next-auth.d.ts
@@ -11,6 +11,7 @@ declare module "next-auth" {
       role: Role;
       username: string;
       id: string;
+      newsletter: boolean;
     } & DefaultSession["user"];
   }
 
@@ -18,5 +19,6 @@ declare module "next-auth" {
     username?: string;
     role: Role;
     id: string;
+    newsletter: boolean;
   }
 }

From 2a4f3ef4362678000edc29bdaa5b345094fd0980 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 17:38:08 +0000
Subject: [PATCH 17/19] feat(e2e): enhance publish flow tests with improved
 wait conditions and selectors

---
 e2e/editor.spec.ts   | 68 +++++++++++++++++++++++++++++++-------------
 e2e/my-posts.spec.ts |  2 ++
 e2e/saved.spec.ts    |  9 +++---
 3 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/e2e/editor.spec.ts b/e2e/editor.spec.ts
index b2ea7b6c..e503969c 100644
--- a/e2e/editor.spec.ts
+++ b/e2e/editor.spec.ts
@@ -798,14 +798,15 @@ test.describe("Publish Flow", () => {
     await page.locator(SELECTORS.editorContent).click();
     await page.keyboard.type(articleContent);
 
-    // Wait for state to update
-    await page.waitForTimeout(500);
-
-    // Click Publish button in nav
-    await page.locator('nav button:has-text("Publish")').click();
+    // Wait for Publish button to be enabled
+    const publishButton = page.locator('nav button:has-text("Publish")');
+    await expect(publishButton).toBeEnabled({ timeout: 10000 });
+    await publishButton.click();
 
     // Modal should appear with whimsical content
-    await expect(page.locator('text="Ready to launch?"')).toBeVisible();
+    await expect(page.locator('text="Ready to launch?"')).toBeVisible({
+      timeout: 5000,
+    });
     await expect(page.locator(SELECTORS.letsDoThisButton)).toBeVisible();
     await expect(page.locator(SELECTORS.maybeLaterButton)).toBeVisible();
   });
@@ -820,17 +821,25 @@ test.describe("Publish Flow", () => {
       "Content for modal close test with enough text for testing",
     );
 
-    // Wait for state to update
+    // Wait for auto-save to complete before opening modal
+    await expect(page.locator("nav >> text=/Saved .*/")).toBeVisible({
+      timeout: 15000,
+    });
     await page.waitForTimeout(500);
 
-    // Open modal
-    await page.locator('nav button:has-text("Publish")').click();
-    await expect(page.locator('text="Ready to launch?"')).toBeVisible();
+    // Wait for Publish button to be enabled, then open modal
+    const publishButton = page.locator('nav button:has-text("Publish")');
+    await expect(publishButton).toBeEnabled({ timeout: 10000 });
+    await publishButton.click();
+    await expect(page.locator('text="Ready to launch?"')).toBeVisible({
+      timeout: 5000,
+    });
 
     // Wait for modal animation to settle, then click Maybe later
     const maybeLaterBtn = page.locator(SELECTORS.maybeLaterButton);
-    await expect(maybeLaterBtn).toBeVisible();
-    await maybeLaterBtn.click({ timeout: 10000 });
+    await expect(maybeLaterBtn).toBeVisible({ timeout: 5000 });
+    await page.waitForTimeout(300); // Allow animation to settle
+    await maybeLaterBtn.click();
 
     // Modal should close
     await expect(page.locator('text="Ready to launch?"')).toBeHidden();
@@ -870,16 +879,27 @@ test.describe("Publish Flow", () => {
     const titleValue = await titleInput.inputValue();
     expect(titleValue.length).toBeGreaterThan(0);
 
-    // Click Publish button in nav
-    await page.locator('nav button:has-text("Publish")').click();
+    // Wait for auto-save to complete (check nav "Saved" timestamp)
+    await expect(page.locator("nav >> text=/Saved .*/")).toBeVisible({
+      timeout: 15000,
+    });
+
+    // Additional wait for any pending state updates to settle
+    await page.waitForTimeout(1000);
+
+    // Wait for Publish button to be enabled (requires valid title + URL)
+    const publishButton = page.locator('nav button:has-text("Publish")');
+    await expect(publishButton).toBeEnabled({ timeout: 10000 });
+    await publishButton.click();
 
     // Should show link-specific modal text (not an error)
-    await expect(page.locator('text="Spread the word!"')).toBeVisible({
-      timeout: 5000,
-    });
+    const spreadTheWordText = page.locator('text="Spread the word!"');
+    await expect(spreadTheWordText).toBeVisible({ timeout: 10000 });
 
     // Click Share it! to publish
-    await page.locator(SELECTORS.shareItButton).click();
+    const shareBtn = page.locator(SELECTORS.shareItButton);
+    await expect(shareBtn).toBeVisible({ timeout: 5000 });
+    await shareBtn.click();
 
     // Wait for publish to complete - should redirect to post page
     // The redirect URL pattern is /{username}/{slug}
@@ -900,11 +920,19 @@ test.describe("Publish Flow", () => {
     await page.locator(SELECTORS.editorContent).click();
     await page.keyboard.type(articleContent);
 
-    // Wait for state to update
+    // Wait for auto-save to complete before publishing (check nav "Saved" timestamp)
+    await expect(page.locator("nav >> text=/Saved .*/")).toBeVisible({
+      timeout: 15000,
+    });
     await page.waitForTimeout(500);
 
     // Publish
-    await page.locator('nav button:has-text("Publish")').click();
+    const publishButton = page.locator('nav button:has-text("Publish")');
+    await expect(publishButton).toBeEnabled({ timeout: 10000 });
+    await publishButton.click();
+    await expect(page.locator(SELECTORS.letsDoThisButton)).toBeVisible({
+      timeout: 5000,
+    });
     await page.locator(SELECTORS.letsDoThisButton).click();
 
     // Should redirect to article page
diff --git a/e2e/my-posts.spec.ts b/e2e/my-posts.spec.ts
index cad9c4ba..673dd5ce 100644
--- a/e2e/my-posts.spec.ts
+++ b/e2e/my-posts.spec.ts
@@ -15,6 +15,8 @@ async function openTab(page: Page, tabName: TabName) {
   await expect(page.getByText("Fetching your posts...")).toBeHidden({
     timeout: 15000,
   });
+  // Additional wait for content to render
+  await page.waitForTimeout(500);
 }
 
 async function openDeleteModal(page: Page, title: string) {
diff --git a/e2e/saved.spec.ts b/e2e/saved.spec.ts
index 428c71e6..160b54d8 100644
--- a/e2e/saved.spec.ts
+++ b/e2e/saved.spec.ts
@@ -35,12 +35,11 @@ test.describe("Authenticated Saved Page", () => {
     await page.goto("http://localhost:3000/feed?type=article");
     await page.waitForSelector("article");
 
-    // Get the title of the first article before bookmarking
+    // Get the title of the first article before bookmarking (use h2 heading)
     const articleTitle = await page
       .locator("article")
       .first()
-      .locator("a")
-      .first()
+      .locator("h2")
       .textContent();
 
     // Click bookmark on first item
@@ -53,7 +52,9 @@ test.describe("Authenticated Saved Page", () => {
 
     // The bookmarked article should appear
     if (articleTitle) {
-      await expect(page.getByText(articleTitle.trim())).toBeVisible({
+      await expect(
+        page.getByRole("heading", { name: articleTitle.trim() }),
+      ).toBeVisible({
         timeout: 10000,
       });
     }

From e50a838ada51b85530705072799c1a03bc79b3d8 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 17:38:14 +0000
Subject: [PATCH 18/19] style: standardize formatting and clean up whitespace
 across multiple files

---
 .github/workflows/e2e-tests.yml               |   4 +-
 .github/workflows/greetings.yml               |   8 +-
 .github/workflows/pull-request.yml            |   4 +-
 CONTRIBUTING.md                               |   3 +-
 EDITOR_SHORTCUTS.MD                           |  51 ++-
 LICENSE.md                                    | 366 +++++++++---------
 app/(app)/jobs/create/_client.tsx             |   4 +-
 app/api/fetch-metadata/route.ts               |   2 +-
 app/global-error.tsx                          |   2 +-
 cdk/README.md                                 |  12 +-
 components/Comments/CommentsArea.tsx          |   2 +-
 .../components/UrlMetadataPreview.tsx         |   2 +-
 .../PostEditor/extensions/s3-image-upload.ts  |   2 +-
 .../FallbackMedia/FallbackMedia.tsx           |   2 +-
 components/ui-components/listbox.tsx          |   2 -
 components/ui-components/sidebar.tsx          |   1 -
 components/ui/Search.tsx                      |   2 +-
 curriculum/intro-to-react/introduction.md     |  38 +-
 markdoc/tags/markdoc-example.markdoc.ts       |   2 +-
 next-env.d.ts                                 |   2 +-
 seed.yml                                      |   1 -
 server/api/router/comment.ts                  |   6 +-
 22 files changed, 256 insertions(+), 262 deletions(-)

diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
index c97d5a06..79da9231 100644
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
           cache: "npm"
 
       - name: Install dependencies
@@ -55,7 +55,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
           cache: "npm"
 
       - name: Cache Playwright browsers
diff --git a/.github/workflows/greetings.yml b/.github/workflows/greetings.yml
index 3fc66e92..f9c10ab7 100644
--- a/.github/workflows/greetings.yml
+++ b/.github/workflows/greetings.yml
@@ -1,4 +1,4 @@
-name: 'Welcome New Contributors'
+name: "Welcome New Contributors"
 
 on:
   issues:
@@ -17,9 +17,9 @@ jobs:
       issues: write
       pull-requests: write
     steps:
-      - name: 'Greet the contributor'
+      - name: "Greet the contributor"
         uses: garg3133/welcome-new-contributors@v1.2
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          issue-message: 'Hello @contributor_name, thanks for opening your first issue! Your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.'
-          pr-message: 'Hello @contributor_name, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!'
+          issue-message: "Hello @contributor_name, thanks for opening your first issue! Your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible."
+          pr-message: "Hello @contributor_name, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!"
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 41990f6d..2da5fc1e 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -19,8 +19,8 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
+          node-version-file: ".nvmrc"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6ea072a8..addefd7d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -120,7 +120,7 @@ For e2e tests we are using playwright
 
 After making changes make sure that tests passes
 
-To create a e2e test make a file in `/e2e` directory 
+To create a e2e test make a file in `/e2e` directory
 
 **1.** Start the codu application by typing this command:
 
@@ -136,7 +136,6 @@ yarn test:e2e
 
 Read Playwright [documentation](https://playwright.dev/)
 
-
 ---
 
 ## Style Guide for Git Commit Messages :memo:
diff --git a/EDITOR_SHORTCUTS.MD b/EDITOR_SHORTCUTS.MD
index 9b761ead..81435ec9 100644
--- a/EDITOR_SHORTCUTS.MD
+++ b/EDITOR_SHORTCUTS.MD
@@ -4,20 +4,20 @@ This guide provides an overview of the available hotkeys and shortcuts for the c
 
 ## Hotkeys
 
-| Hotkey          | Description                  |
-|-----------------|------------------------------|
-| `Tab`           | Trigger shortcuts (see below)|
-| `Backspace`     | Select Previous word         |
-| `Meta+(1-6)`    | Heading 1 - 6                |
-| `Meta+b`        | Bold                         |
-| `Meta+i`        | Italic                       |
-| `Meta+shift+b`  | Bold & Italic                |
-| `Meta+s`        | Code Snippet                 |
-| `Meta+shift+c`  | Code Block                   |
-| `Meta+Shift+.`  | Block Quote                  |
-| `Meta+u`        | URL                          |
-| `Meta+l`        | Link                         |
-| `Meta+Shift+i`  | Image                        |
+| Hotkey         | Description                   |
+| -------------- | ----------------------------- |
+| `Tab`          | Trigger shortcuts (see below) |
+| `Backspace`    | Select Previous word          |
+| `Meta+(1-6)`   | Heading 1 - 6                 |
+| `Meta+b`       | Bold                          |
+| `Meta+i`       | Italic                        |
+| `Meta+shift+b` | Bold & Italic                 |
+| `Meta+s`       | Code Snippet                  |
+| `Meta+shift+c` | Code Block                    |
+| `Meta+Shift+.` | Block Quote                   |
+| `Meta+u`       | URL                           |
+| `Meta+l`       | Link                          |
+| `Meta+Shift+i` | Image                         |
 
 ## How to Use Hotkeys
 
@@ -25,22 +25,21 @@ This guide provides an overview of the available hotkeys and shortcuts for the c
 2. You can also highlight the word and then use the hotkey combination and for this you can double click the word or phrase or press meta+backspace a few times to highlight the required selection of text.
 3. For Links and images, select the text and then use the hotkey combination. You will be prompted for the url.
 
-
 ## Markdown Shortcuts
 
-| Shortcut | Description                            | Example                       |
-|----------|----------------------------------------|-------------------------------|
-| `/link`  | Create a link with text and URL        | `[text](url)`                 |
-| `/image` | Insert an image with alt text and URL  | `![text](url)`                |
+| Shortcut | Description                           | Example        |
+| -------- | ------------------------------------- | -------------- |
+| `/link`  | Create a link with text and URL       | `[text](url)`  |
+| `/image` | Insert an image with alt text and URL | `![text](url)` |
 
 ## Custom Tag Shortcuts
 
-| Shortcut      | Description                        | Example                       |
-|---------------|------------------------------------|-------------------------------|
-| `/media`      | Embed a media file with src        | `{% media src="url" /%}`      |
-| `/youtube`    | Embed a YouTube video with src     | `{% youtube src="url" /%}`    |
-| `/codepen`    | Embed a CodePen project with src   | `{% codepen src="url" /%}`    |
-| `/codesandbox`| Embed a CodeSandbox project with src | `{% codesandbox src="url" /%}`|
+| Shortcut       | Description                          | Example                        |
+| -------------- | ------------------------------------ | ------------------------------ |
+| `/media`       | Embed a media file with src          | `{% media src="url" /%}`       |
+| `/youtube`     | Embed a YouTube video with src       | `{% youtube src="url" /%}`     |
+| `/codepen`     | Embed a CodePen project with src     | `{% codepen src="url" /%}`     |
+| `/codesandbox` | Embed a CodeSandbox project with src | `{% codesandbox src="url" /%}` |
 
 ## How to Use Shortcuts
 
@@ -48,6 +47,6 @@ This guide provides an overview of the available hotkeys and shortcuts for the c
 2. Type the shortcut (e.g., `/link`).
 3. Press the `Tab` key.
 4. For Markdown shortcuts `/link` and `/image`, you'll be prompted to enter the text and URL.
-5. For custom tag shortcuts, you'll be prompted to enter the URL for the `src` attribute. 
+5. For custom tag shortcuts, you'll be prompted to enter the URL for the `src` attribute.
 
 The editor will automatically replace the shortcut with the corresponding content.
diff --git a/LICENSE.md b/LICENSE.md
index 827e8119..1d67f706 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -2,180 +2,180 @@
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
 
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, patent, trademark, and
+    attribution notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
 
       To apply the Apache License to your work, attach the following
       boilerplate notice, with the fields enclosed by brackets "[]"
@@ -186,16 +186,16 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2023 Codú (Codú Software Solutions Limited).
+Copyright 2023 Codú (Codú Software Solutions Limited).
 
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
 
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/app/(app)/jobs/create/_client.tsx b/app/(app)/jobs/create/_client.tsx
index e59ac0ef..8cb48003 100644
--- a/app/(app)/jobs/create/_client.tsx
+++ b/app/(app)/jobs/create/_client.tsx
@@ -22,7 +22,7 @@ import {
 } from "@/components/ui-components/radio";
 import { Strong, Text } from "@/components/ui-components/text";
 import { Textarea } from "@/components/ui-components/textarea";
-import type { saveJobsInput} from "@/schema/job";
+import type { saveJobsInput } from "@/schema/job";
 import { saveJobsSchema } from "@/schema/job";
 import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
 import { uploadFile } from "@/utils/s3helpers";
@@ -31,7 +31,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 import React, { useRef, useState } from "react";
-import type { SubmitHandler} from "react-hook-form";
+import type { SubmitHandler } from "react-hook-form";
 import { Controller, useForm } from "react-hook-form";
 import * as Sentry from "@sentry/nextjs";
 import { toast } from "sonner";
diff --git a/app/api/fetch-metadata/route.ts b/app/api/fetch-metadata/route.ts
index 407ca922..cace5853 100644
--- a/app/api/fetch-metadata/route.ts
+++ b/app/api/fetch-metadata/route.ts
@@ -1,4 +1,4 @@
-import type { NextRequest} from "next/server";
+import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import { auth } from "@/auth";
 
diff --git a/app/global-error.tsx b/app/global-error.tsx
index f67e2273..37a4810b 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -18,7 +18,7 @@ export default function GlobalError({
     <html lang="en">
       <body>
         {/* This is the default Next.js error component but it doesn't allow omitting the statusCode property yet. */}
-        { }
+        {}
         <NextError statusCode={undefined as any} />
       </body>
     </html>
diff --git a/cdk/README.md b/cdk/README.md
index 320efc02..83138c7a 100644
--- a/cdk/README.md
+++ b/cdk/README.md
@@ -6,9 +6,9 @@ The `cdk.json` file tells the CDK Toolkit how to execute your app.
 
 ## Useful commands
 
-* `npm run build`   compile typescript to js
-* `npm run watch`   watch for changes and compile
-* `npm run test`    perform the jest unit tests
-* `cdk deploy`      deploy this stack to your default AWS account/region
-* `cdk diff`        compare deployed stack with current state
-* `cdk synth`       emits the synthesized CloudFormation template
+- `npm run build` compile typescript to js
+- `npm run watch` watch for changes and compile
+- `npm run test` perform the jest unit tests
+- `cdk deploy` deploy this stack to your default AWS account/region
+- `cdk diff` compare deployed stack with current state
+- `cdk synth` emits the synthesized CloudFormation template
diff --git a/components/Comments/CommentsArea.tsx b/components/Comments/CommentsArea.tsx
index b7482238..e28dbd5c 100644
--- a/components/Comments/CommentsArea.tsx
+++ b/components/Comments/CommentsArea.tsx
@@ -184,7 +184,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
     return commentsArr.map((comment) => {
       const { body, createdAt, updatedAt, id, userVote, score, author } =
         comment;
-       
+
       const children = (comment as any).children;
       // Handle deleted comments (author is null)
       const name = author?.name || "[deleted]";
diff --git a/components/PostEditor/components/UrlMetadataPreview.tsx b/components/PostEditor/components/UrlMetadataPreview.tsx
index ac9591f4..2df65c21 100644
--- a/components/PostEditor/components/UrlMetadataPreview.tsx
+++ b/components/PostEditor/components/UrlMetadataPreview.tsx
@@ -81,7 +81,7 @@ export function UrlMetadataPreview({
       {/* Cover Image */}
       {metadata.image && (
         <div className="relative aspect-video w-full overflow-hidden bg-neutral-100 dark:bg-neutral-900">
-          { }
+          {}
           <img
             src={metadata.image}
             alt={metadata.title || "Link preview"}
diff --git a/components/PostEditor/extensions/s3-image-upload.ts b/components/PostEditor/extensions/s3-image-upload.ts
index e9eec670..d67ba1c6 100644
--- a/components/PostEditor/extensions/s3-image-upload.ts
+++ b/components/PostEditor/extensions/s3-image-upload.ts
@@ -34,7 +34,7 @@ export const S3ImageUploadPlugin = () =>
         set = set.map(tr.mapping, tr.doc);
 
         // Handle add/remove placeholder actions
-         
+
         const action = tr.getMeta(uploadKey as any);
         if (action?.add) {
           const { id, pos, src } = action.add;
diff --git a/components/markdocNodes/FallbackMedia/FallbackMedia.tsx b/components/markdocNodes/FallbackMedia/FallbackMedia.tsx
index dca674b0..1e9ecbc0 100644
--- a/components/markdocNodes/FallbackMedia/FallbackMedia.tsx
+++ b/components/markdocNodes/FallbackMedia/FallbackMedia.tsx
@@ -6,7 +6,7 @@ export function FallbackMedia(
   return (
     <div>
       {/* TODO Review this as it should have a title */}
-      { }
+      {}
       <iframe style={{ width: "100%", height: "300px" }} {...props} />
     </div>
   );
diff --git a/components/ui-components/listbox.tsx b/components/ui-components/listbox.tsx
index feeee273..469a3ff3 100644
--- a/components/ui-components/listbox.tsx
+++ b/components/ui-components/listbox.tsx
@@ -1,7 +1,5 @@
 "use client";
 
- 
-
 import * as Headless from "@headlessui/react";
 import clsx from "clsx";
 import { Fragment } from "react";
diff --git a/components/ui-components/sidebar.tsx b/components/ui-components/sidebar.tsx
index b8f76b3f..1eabbc2d 100644
--- a/components/ui-components/sidebar.tsx
+++ b/components/ui-components/sidebar.tsx
@@ -1,5 +1,4 @@
 "use client";
- 
 
 import * as Headless from "@headlessui/react";
 import clsx from "clsx";
diff --git a/components/ui/Search.tsx b/components/ui/Search.tsx
index d1566dd8..3ffaa4a7 100644
--- a/components/ui/Search.tsx
+++ b/components/ui/Search.tsx
@@ -366,7 +366,7 @@ function SearchDialog({
   const searchParams = useSearchParams();
 
   // Close dialog when pathname or searchParams change
-   
+
   useEffect(() => {
     setOpen(false);
   }, [pathname, searchParams, setOpen]);
diff --git a/curriculum/intro-to-react/introduction.md b/curriculum/intro-to-react/introduction.md
index a10d2cf8..169d1c37 100644
--- a/curriculum/intro-to-react/introduction.md
+++ b/curriculum/intro-to-react/introduction.md
@@ -10,14 +10,14 @@ How popular? Check out [this list](https://trends.builtwith.com/websitelist/Reac
 
 React has a small API, and you need to know only a handful of concepts to start being productive:
 
-* Components
-* JSX
-* Styling
-* State
-* Props
-* Effects
+- Components
+- JSX
+- Styling
+- State
+- Props
+- Effects
 
-We will cover all of these concepts in this series, and by the end, you should be able to create your first small applications in React from scratch. 
+We will cover all of these concepts in this series, and by the end, you should be able to create your first small applications in React from scratch.
 
 You might initially find learning React hard, but once you understand some of the fundamentals, it'll be one of the best developer experiences.
 
@@ -27,7 +27,7 @@ Be patient, practice, and you'll be rewarded!
 
 Facebook (and, more specifically, a Facebook employee named Jordan Walke) started developing it as they faced issues with code maintenance in 2011\.
 
-It was then open-sourced and made available in 2013, where we have seen it co-developed by Facebook and the open-source community ever since. 
+It was then open-sourced and made available in 2013, where we have seen it co-developed by Facebook and the open-source community ever since.
 
 ## Benefits of using React
 
@@ -35,7 +35,7 @@ Before you dive into React, I think it's worth understanding some of the benefit
 
 Here are some of the highlights:
 
-**Reusable components:** React's component-based architecture promotes code reusability, making it easier to maintain, scale, and update applications. This reuse makes developers much more productive since they can share common patterns and components throughout an application. 
+**Reusable components:** React's component-based architecture promotes code reusability, making it easier to maintain, scale, and update applications. This reuse makes developers much more productive since they can share common patterns and components throughout an application.
 
 **Improved performance:** React's virtual DOM implementation reduces the need for frequent DOM manipulation, resulting in faster and more efficient rendering of user interfaces.
 
@@ -51,16 +51,16 @@ If you're knowledgeable in JavaScript, React should be relatively easy to get th
 
 Here's a list of the JavaScript topics you should be comfortable with to get the most from the series:
 
-* Variables and data types
-* Control structures (if-else, loops)
-* Functions (including arrow functions)
-* Callback functions
-* Arrays and objects
-* Array methods (map, filter, reduce)
-* Object destructuring and spread operator
-* Template literals
-* Modules (import, export)
-* Promises
+- Variables and data types
+- Control structures (if-else, loops)
+- Functions (including arrow functions)
+- Callback functions
+- Arrays and objects
+- Array methods (map, filter, reduce)
+- Object destructuring and spread operator
+- Template literals
+- Modules (import, export)
+- Promises
 
 These topics will be noteworthy because we will use them within the code examples.
 
diff --git a/markdoc/tags/markdoc-example.markdoc.ts b/markdoc/tags/markdoc-example.markdoc.ts
index de3385ee..6b833be6 100644
--- a/markdoc/tags/markdoc-example.markdoc.ts
+++ b/markdoc/tags/markdoc-example.markdoc.ts
@@ -1,4 +1,4 @@
-import type { Node} from "@markdoc/markdoc";
+import type { Node } from "@markdoc/markdoc";
 import { Tag } from "@markdoc/markdoc";
 import Code from "../../components/markdocNodes/Code/Code";
 
diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c7..c4b7818f 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/seed.yml b/seed.yml
index c657fdd1..353065ed 100644
--- a/seed.yml
+++ b/seed.yml
@@ -1,3 +1,2 @@
 before_compile:
   - n 20.11.1
-
diff --git a/server/api/router/comment.ts b/server/api/router/comment.ts
index 7248d7d8..ab9ef011 100644
--- a/server/api/router/comment.ts
+++ b/server/api/router/comment.ts
@@ -690,7 +690,7 @@ export const commentRouter = createTRPCRouter({
 });
 
 // Shape a single comment for API response
- 
+
 function shapeComment(comment: any) {
   const isDeleted = !!comment.deletedAt;
 
@@ -721,10 +721,10 @@ function shapeComment(comment: any) {
 }
 
 // Build tree structure from flat list of comments
- 
+
 function buildCommentTree(rootComment: any, descendants: any[]) {
   // Create a map of id -> comment with children array
-   
+
   const commentMap = new Map<string, any>();
 
   // Initialize root

From 7715fcf76ebfa473d0388485e8fb6342bd563e48 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Thu, 8 Jan 2026 19:10:04 +0000
Subject: [PATCH 19/19] feat(editor): enhance CreateContent component with
 improved data handling and state management

---
 .../create/[[...paramsArr]]/_client.tsx       | 55 ++++++++++++-------
 .../editor/extensions/slash-command.tsx       |  6 +-
 next-env.d.ts                                 |  2 +-
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/app/(editor)/create/[[...paramsArr]]/_client.tsx b/app/(editor)/create/[[...paramsArr]]/_client.tsx
index 9e1b3fcb..d85306b2 100644
--- a/app/(editor)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/_client.tsx
@@ -8,6 +8,8 @@ import React, {
   Fragment,
   useCallback,
   Suspense,
+  useRef,
+  useMemo,
 } from "react";
 import { toast } from "sonner";
 import {
@@ -119,8 +121,9 @@ const CreateContent = ({ session }: { session: Session | null }) => {
   const [savedTime, setSavedTime] = useState("");
   const [showPublishConfirm, setShowPublishConfirm] = useState(false);
   const [isPostScheduled, setIsPostScheduled] = useState(false);
-  const [shouldRefetch, setShouldRefetch] = useState(true);
   const [unsavedChanges, setUnsavedChanges] = useState(false);
+  const [dataLoaded, setDataLoaded] = useState(false);
+  const formPopulatedRef = useRef(false);
   const [copied, setCopied] = useState(false);
   const [postStatus, setPostStatus] = useState<PostStatus | null>(null);
 
@@ -172,7 +175,8 @@ const CreateContent = ({ session }: { session: Session | null }) => {
   } = api.content.editDraft.useQuery(
     { id: postId },
     {
-      enabled: !!postId && shouldRefetch,
+      enabled: !!postId && !dataLoaded,
+      staleTime: Infinity, // Prevent refetching
     },
   );
 
@@ -193,11 +197,12 @@ const CreateContent = ({ session }: { session: Session | null }) => {
     }
   }, [draftFetchError, isError]);
 
+  // Track when data has been successfully loaded
   useEffect(() => {
-    if (shouldRefetch) {
-      setShouldRefetch(!(dataStatus === "success"));
+    if (dataStatus === "success" && !dataLoaded) {
+      queueMicrotask(() => setDataLoaded(true));
     }
-  }, [dataStatus, shouldRefetch]);
+  }, [dataStatus, dataLoaded]);
 
   useEffect(() => {
     const to = setTimeout(setCopied, 2000, false);
@@ -373,9 +378,12 @@ const CreateContent = ({ session }: { session: Session | null }) => {
     }
   };
 
-  // Load existing data
-  useEffect(() => {
-    if (!data) return;
+  // Load existing data - only populate form once when data first arrives
+  // Using a callback pattern to batch state updates and avoid cascading renders
+  const populateFormFromData = useCallback(() => {
+    if (!data || formPopulatedRef.current) return;
+    formPopulatedRef.current = true;
+
     const {
       body: existingBody,
       excerpt: existingExcerpt,
@@ -391,10 +399,7 @@ const CreateContent = ({ session }: { session: Session | null }) => {
     if (postType?.toLowerCase() === "link") {
       setLinkTitle(existingTitle || "");
       setLinkUrl(externalUrl || "");
-      // Only switch tab if not already on link tab (preserve URL param on initial load)
-      if (activeTab !== "link") {
-        setActiveTab("link");
-      }
+      setActiveTab("link");
     } else {
       setTitle(existingTitle || "");
       setBody(existingBody || "");
@@ -410,18 +415,23 @@ const CreateContent = ({ session }: { session: Session | null }) => {
     setPostStatus(
       publishedAt ? getPostStatus(new Date(publishedAt)) : status.DRAFT,
     );
-  }, [data, activeTab]);
+  }, [data]);
 
-  // Update post status based on content
+  // Call populateFormFromData when data changes - defer to avoid sync setState
   useEffect(() => {
+    queueMicrotask(populateFormFromData);
+  }, [populateFormFromData]);
+
+  // Update post status based on content
+  // This is intentional - we need to track draft status based on content length
+  const computedPostStatus = useMemo(() => {
     if ((title + body).length < 5) {
-      setPostStatus(null);
-    } else if (postStatus === null) {
-      setPostStatus(status.DRAFT);
+      return null;
     }
+    return postStatus ?? status.DRAFT;
   }, [title, body, postStatus]);
 
-  // Auto-save for drafts
+  // Auto-save for drafts - use queueMicrotask to defer the mutation call
   useEffect(() => {
     if (currentPostStatus !== status.DRAFT) return;
     // For write tab, require both title and body; for link tab, require url and title
@@ -431,7 +441,10 @@ const CreateContent = ({ session }: { session: Session | null }) => {
       if (!linkUrl || !linkTitle) return;
     }
     if (debouncedValue === (data?.title || "") + data?.body) return;
-    if (unsavedChanges) savePost();
+    if (unsavedChanges) {
+      // Defer the save call to avoid synchronous setState in effect
+      queueMicrotask(() => savePost());
+    }
   }, [
     debouncedValue,
     currentPostStatus,
@@ -465,6 +478,7 @@ const CreateContent = ({ session }: { session: Session | null }) => {
   useEffect(() => {
     if (activeTab !== "write") return;
     if ((title + body).length < 5) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setUnsavedChanges(true);
   }, [title, body, activeTab]);
 
@@ -472,6 +486,7 @@ const CreateContent = ({ session }: { session: Session | null }) => {
   useEffect(() => {
     if (activeTab !== "link") return;
     if (!linkUrl && !linkTitle) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setUnsavedChanges(true);
   }, [linkUrl, linkTitle, activeTab]);
 
@@ -519,7 +534,7 @@ const CreateContent = ({ session }: { session: Session | null }) => {
       <EditorNav
         session={session}
         username={session?.user?.name || null}
-        postStatus={postStatus}
+        postStatus={computedPostStatus}
         unsavedChanges={unsavedChanges}
         onPublish={handlePublish}
         isDisabled={isDisabled}
diff --git a/components/editor/editor/extensions/slash-command.tsx b/components/editor/editor/extensions/slash-command.tsx
index 0bb4d623..557ad258 100644
--- a/components/editor/editor/extensions/slash-command.tsx
+++ b/components/editor/editor/extensions/slash-command.tsx
@@ -1,4 +1,4 @@
- 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, {
   useState,
   useEffect,
@@ -231,11 +231,11 @@ const CommandList = ({
   range: any;
 }) => {
   // Use items.length as key to reset selectedIndex when items change
-   
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   // Reset selection when items change - using useLayoutEffect to run synchronously
-   
+  // eslint-disable-next-line react-hooks/set-state-in-effect
   useLayoutEffect(() => {
     setSelectedIndex(0);
   }, [items]);
diff --git a/next-env.d.ts b/next-env.d.ts
index c4b7818f..9edff1c7 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.