Move the new note button

Author: colebemis

src/components/app-header.tsx

@@ -44,13 +44,37 @@ export function AppHeader({ title, icon, className, actions }: AppHeaderProps) {
       <header className="flex h-10 items-center gap-2 px-2 coarse:h-14">
         <div className="hidden items-center empty:hidden sm:flex">
           {sidebar === "collapsed" ? (
-            <IconButton
-              aria-label="Expand sidebar"
-              size="small"
-              onClick={() => setSidebar("expanded")}
-            >
-              <SidebarIcon16 />
-            </IconButton>
+            <>
+              <IconButton
+                aria-label="Expand sidebar"
+                size="small"
+                onClick={() => setSidebar("expanded")}
+              >
+                <SidebarIcon16 />
+              </IconButton>
+              <IconButton
+                aria-label="New note"
+                shortcut={["⌘", "⇧", "O"]}
+                size="small"
+                onClick={() => {
+                  navigate({
+                    to: "/notes/$",
+                    params: { _splat: `${Date.now()}` },
+                    search: {
+                      mode: "write",
+                      query: undefined,
+                      view: "grid",
+                    },
+                  })
+                }}
+              >
+                <PlusIcon16 />
+              </IconButton>
+              <div
+                role="separator"
+                className={cx("mx-2 hidden h-5 w-px bg-border-secondary sm:block")}
+              />
+            </>
           ) : null}
           <IconButton
             aria-label="Go back"
@@ -78,35 +102,7 @@ export function AppHeader({ title, icon, className, actions }: AppHeaderProps) {
           <div className="truncate font-content font-bold">{title}</div>
         </div>
         <div className="flex items-center gap-2 justify-self-end">
-          {actions ? (
-            <>
-              <div className="flex items-center">{actions}</div>
-              <div
-                role="separator"
-                className={cx("hidden h-5 w-px bg-border-secondary sm:block")}
-              />
-            </>
-          ) : null}
-          <div className="hidden items-center sm:flex">
-            <IconButton
-              aria-label="New note"
-              shortcut={["⌘", "⇧", "O"]}
-              size="small"
-              onClick={() => {
-                navigate({
-                  to: "/notes/$",
-                  params: { _splat: `${Date.now()}` },
-                  search: {
-                    mode: "write",
-                    query: undefined,
-                    view: "grid",
-                  },
-                })
-              }}
-            >
-              <PlusIcon16 />
-            </IconButton>
-          </div>
+          {actions ? <div className="flex items-center">{actions}</div> : null}
         </div>
       </header>
     </div>

src/components/sidebar.tsx

@@ -1,21 +1,23 @@
+import { useNavigate } from "@tanstack/react-router"
 import { useSetAtom } from "jotai"
 import { sidebarAtom } from "../global-state"
 import { useIsScrolled } from "../hooks/is-scrolled"
 import { cx } from "../utils/cx"
 import { IconButton } from "./icon-button"
-import { SidebarFillIcon16 } from "./icons"
+import { PlusIcon16, SidebarFillIcon16 } from "./icons"
 import { NavItems } from "./nav-items"
 
 export function Sidebar() {
   const setSidebar = useSetAtom(sidebarAtom)
+  const navigate = useNavigate()
 
   const { isScrolled, topSentinelProps } = useIsScrolled()
 
   return (
     <div className="grid w-56 flex-shrink-0 grid-rows-[auto_1fr] overflow-hidden border-r border-border-secondary">
       <div
         className={cx(
-          "flex w-full border-b p-2",
+          "flex w-full justify-between border-b p-2",
           isScrolled ? "border-border-secondary" : "border-transparent",
         )}
       >
@@ -27,6 +29,24 @@ export function Sidebar() {
         >
           <SidebarFillIcon16 />
         </IconButton>
+        <IconButton
+          aria-label="New note"
+          shortcut={["⌘", "⇧", "O"]}
+          size="small"
+          onClick={() => {
+            navigate({
+              to: "/notes/$",
+              params: { _splat: `${Date.now()}` },
+              search: {
+                mode: "write",
+                query: undefined,
+                view: "grid",
+              },
+            })
+          }}
+        >
+          <PlusIcon16 />
+        </IconButton>
       </div>
       <div className="relative flex scroll-py-2 flex-col gap-2 overflow-auto p-2 pt-0">
         <div {...topSentinelProps} />