Redesign sidebar (#1455)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

components/chat-header.tsx

@@ -1,13 +1,9 @@
 "use client";
 
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { memo } from "react";
-import { useWindowSize } from "usehooks-ts";
-import { SidebarToggle } from "@/components/sidebar-toggle";
 import { Button } from "@/components/ui/button";
-import { PlusIcon, VercelIcon } from "./icons";
-import { useSidebar } from "./ui/sidebar";
+import { VercelIcon } from "./icons";
 import { VisibilitySelector, type VisibilityType } from "./visibility-selector";
 
 function PureChatHeader({
@@ -19,41 +15,18 @@ function PureChatHeader({
   selectedVisibilityType: VisibilityType;
   isReadonly: boolean;
 }) {
-  const router = useRouter();
-  const { open } = useSidebar();
-
-  const { width: windowWidth } = useWindowSize();
-
   return (
-    <header className="sticky top-0 flex items-center gap-2 bg-background px-2 py-1.5 md:px-2">
-      <SidebarToggle />
-
-      {(!open || windowWidth < 768) && (
-        <Button
-          className="order-2 ml-auto md:order-1 md:ml-0"
-          onClick={() => {
-            router.push("/");
-            router.refresh();
-          }}
-          size="icon-sm"
-          variant="outline"
-        >
-          <PlusIcon />
-          <span className="md:sr-only">New Chat</span>
-        </Button>
-      )}
-
+    <header className="sticky top-0 flex items-center gap-2 bg-background p-3">
       {!isReadonly && (
         <VisibilitySelector
           chatId={chatId}
-          className="order-1 md:order-2"
           selectedVisibilityType={selectedVisibilityType}
         />
       )}
 
       <Button
         asChild
-        className="order-3 hidden bg-zinc-900 px-2 text-zinc-50 hover:bg-zinc-800 md:ml-auto md:flex md:h-fit dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
+        className="hidden bg-neutral-900 px-4 text-neutral-50 hover:bg-neutral-800 md:ml-auto md:flex dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200"
       >
         <Link
           href={"https://vercel.com/templates/next.js/chatbot"}