From ce409a55d89978448da901c676dc004ae9d3b6b9 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 4 Apr 2024 00:54:56 -0700
Subject: [PATCH] Unship panel layout

---
 src/components/calendar.tsx     |  77 ++++++++-------
 src/components/command-menu.tsx |  14 +--
 src/components/markdown.tsx     |  30 ++----
 src/components/nav-bar.tsx      |  21 +---
 src/components/note-card.tsx    |  10 +-
 src/components/note-list.tsx    |   8 +-
 src/components/panel.tsx        | 169 ++++++--------------------------
 src/components/root-layout.tsx  |   7 +-
 src/components/tag-link.tsx     |   1 -
 src/pages/note.tsx              |   8 +-
 src/pages/notes.tsx             |   8 +-
 src/pages/tag.tsx               |   8 +-
 src/pages/tags.tsx              |   8 +-
 src/panels/daily.tsx            |   3 +-
 src/panels/note.tsx             |   2 +-
 src/panels/notes.tsx            |   2 +-
 src/panels/tag.tsx              |   8 +-
 src/panels/tags.tsx             |   4 +-
 src/panels/weekly.tsx           |   2 +-
 src/styles/cmdk.css             |   2 +-
 20 files changed, 109 insertions(+), 283 deletions(-)

diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
index 6085b87b..e0ec5a18 100644
--- a/src/components/calendar.tsx
+++ b/src/components/calendar.tsx
@@ -36,41 +36,46 @@ export function Calendar({ activeNoteId }: { activeNoteId: string }) {
   )
 
   return (
-    <div className="flex flex-col gap-2 overflow-hidden px-2 py-2 shadow-[inset_0_-1px_0_var(--color-border-secondary)]">
-      <div className="flex items-center justify-between">
-        <span className="px-2 text-lg font-semibold">
-          {MONTH_NAMES[startOfWeek.getMonth()]} {startOfWeek.getFullYear()}
-        </span>
-        <div className="flex ">
-          <IconButton
-            aria-label="Previous week"
-            onClick={() => setStartOfWeek(previousMonday(startOfWeek))}
-          >
-            <ChevronLeftIcon16 />
-          </IconButton>
-          <IconButton
-            aria-label="Next week"
-            onClick={() => setStartOfWeek(nextMonday(startOfWeek))}
-          >
-            <ChevronRightIcon16 />
-          </IconButton>
+    <div className="shadow-[inset_0_-1px_0_var(--color-border-secondary)]">
+      <div className="mx-auto flex max-w-3xl flex-col gap-2 overflow-hidden p-2">
+        <div className="flex items-center justify-between">
+          <span className="px-2 text-lg font-semibold">
+            {MONTH_NAMES[startOfWeek.getMonth()]} {startOfWeek.getFullYear()}
+          </span>
+          <div className="flex ">
+            <IconButton
+              aria-label="Previous week"
+              onClick={() => setStartOfWeek(previousMonday(startOfWeek))}
+            >
+              <ChevronLeftIcon16 />
+            </IconButton>
+            <IconButton
+              aria-label="Next week"
+              onClick={() => setStartOfWeek(nextMonday(startOfWeek))}
+            >
+              <ChevronRightIcon16 />
+            </IconButton>
+          </div>
         </div>
-      </div>
-      <div className="grid">
-        <RovingFocusGroup.Root orientation="horizontal" className="flex">
-          <CalendarWeek
-            startOfWeek={startOfWeek}
-            isActive={toWeekString(startOfWeek) === activeNoteId}
-          />
-          <div role="separator" className="my-[0.375rem] w-px flex-shrink-0 bg-border-secondary" />
-          {daysOfWeek.map((date) => (
-            <CalendarDate
-              key={date.toISOString()}
-              date={date}
-              isActive={toDateString(date) === activeNoteId}
+        <div className="grid">
+          <RovingFocusGroup.Root orientation="horizontal" className="flex">
+            <CalendarWeek
+              startOfWeek={startOfWeek}
+              isActive={toWeekString(startOfWeek) === activeNoteId}
+            />
+            <div
+              role="separator"
+              className="my-[0.375rem] w-px flex-shrink-0 bg-border-secondary"
             />
-          ))}
-        </RovingFocusGroup.Root>
+            {daysOfWeek.map((date) => (
+              <CalendarDate
+                key={date.toISOString()}
+                date={date}
+                isActive={toDateString(date) === activeNoteId}
+              />
+            ))}
+          </RovingFocusGroup.Root>
+        </div>
       </div>
     </div>
   )
@@ -193,10 +198,10 @@ function CalendarItem({
           hasNotes && !isActive && "after:bg-border",
         )}
       >
-        <div className="flex flex-col items-center gap-1 @[6rem]:flex-row @[6rem]:gap-2 coarse:gap-2">
-          <span className="@[6rem]:hidden">{shortName}</span>
+        <div className="flex flex-col items-center gap-1 @[3rem]:gap-2 coarse:gap-2">
+          <span className="@[3rem]:hidden">{shortName}</span>
           {/* Show full name when there's enough space */}
-          <span className="hidden @[6rem]:inline">{name}</span>
+          <span className="hidden @[3rem]:inline">{name}</span>
           <span
             className={cx(
               isToday && "-mx-1 -my-[0.125rem] rounded-sm px-1 py-[0.125rem]",
diff --git a/src/components/command-menu.tsx b/src/components/command-menu.tsx
index 33fb7b49..5e9ec142 100644
--- a/src/components/command-menu.tsx
+++ b/src/components/command-menu.tsx
@@ -6,7 +6,6 @@ import React from "react"
 import { flushSync } from "react-dom"
 import { useEvent } from "react-use"
 import { Card } from "../components/card"
-import { usePanelActions, usePanels } from "../components/panels"
 import { tagSearcherAtom } from "../global-state"
 import { useDebouncedValue } from "../hooks/debounced-value"
 import { useNavigateWithCache } from "../hooks/navigate-with-cache"
@@ -30,8 +29,6 @@ export function CommandMenu() {
   const searchNotes = useSearchNotes()
   const tagSearcher = useAtomValue(tagSearcherAtom)
   const saveNote = useSaveNote()
-  const panels = usePanels()
-  const { openPanel } = usePanelActions()
   const routerNavigate = useNavigateWithCache()
 
   // Refs
@@ -58,18 +55,11 @@ export function CommandMenu() {
 
   const navigate = React.useCallback(
     (url: string, { openInPanel = true }: { openInPanel?: boolean } = {}) => {
-      if (openInPanel && openPanel) {
-        // If we're in a panels context, navigate by opening a panel
-        openPanel(url, panels.length - 1)
-      } else {
-        // Otherwise, navigate using the router
-        routerNavigate(url)
-      }
-
+      routerNavigate(url)
       setIsOpen(false)
       setQuery("")
     },
-    [openPanel, panels, routerNavigate],
+    [routerNavigate],
   )
 
   // Toggle the menu with `command + k`
diff --git a/src/components/markdown.tsx b/src/components/markdown.tsx
index 39ed9a48..0d6ac967 100644
--- a/src/components/markdown.tsx
+++ b/src/components/markdown.tsx
@@ -100,9 +100,7 @@ export const Markdown = React.memo(
               <div className="flex flex-wrap items-center gap-2">
                 <h1 className="text-xl font-semibold leading-5">{parsedTemplate.data.name}</h1>
                 <PillButton variant="dashed" asChild>
-                  <Link to={`/?${qs.stringify({ q: "has:template" })}`} target="_blank">
-                    Template
-                  </Link>
+                  <Link to={`/?${qs.stringify({ q: "has:template" })}`}>Template</Link>
                 </PillButton>
               </div>
               {/* TODO: Display more input metadata (type, description, etc.) */}
@@ -417,7 +415,7 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] })
       return (
         <span>
           {dateString ? (
-            <Link className="link" target="_blank" to={`/${dateString}`}>
+            <Link className="link" to={`/${dateString}`}>
               {formatDate(dateString, { excludeDayOfWeek: true })}
             </Link>
           ) : (
@@ -427,7 +425,7 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] })
           )}
           <span className="text-text-secondary">
             {" · "}
-            <Link className="link" target="_blank" to={`/${nextBirthdayString}`}>
+            <Link className="link" to={`/${nextBirthdayString}`}>
               {nextAge ? `${withSuffix(nextAge)} birthday` : "Birthday"}
             </Link>{" "}
             is {formatDateDistance(toDateStringUtc(nextBirthday)).toLowerCase()}{" "}
@@ -509,11 +507,7 @@ function Anchor(props: React.ComponentPropsWithoutRef<"a">) {
 
   // Open uploads in a panel
   if (props.href?.startsWith(UPLOADS_DIR)) {
-    return (
-      <Link to={`/file?${qs.stringify({ path: props.href })}`} target="_blank">
-        {props.children}
-      </Link>
-    )
+    return <Link to={`/file?${qs.stringify({ path: props.href })}`}>{props.children}</Link>
   }
 
   // Render relative links with React Router
@@ -555,11 +549,7 @@ function Image(props: React.ComponentPropsWithoutRef<"img">) {
   // Render local files with FilePreview
   if (props.src?.startsWith("/")) {
     return (
-      <Link
-        to={`/file?${qs.stringify({ path: props.src })}`}
-        target="_blank"
-        className="block w-fit !no-underline"
-      >
+      <Link to={`/file?${qs.stringify({ path: props.src })}`} className="block w-fit !no-underline">
         <FilePreview path={props.src} alt={props.alt} />
       </Link>
     )
@@ -690,7 +680,7 @@ function NoteLink({ id, text }: NoteLinkProps) {
   return (
     <HoverCard.Root>
       <HoverCard.Trigger asChild>
-        <Link ref={ref} to={`/${id}`} target="_blank">
+        <Link ref={ref} to={`/${id}`}>
           {isFirst && note && online ? (
             <NoteFavicon
               note={note}
@@ -740,9 +730,7 @@ function NoteEmbed({ id }: NoteEmbedProps) {
         </span>
       )}
       <div className="mt-2 text-sm text-text-secondary">
-        <Link target="_blank" to={`/${id}`}>
-          Source
-        </Link>
+        <Link to={`/${id}`}>Source</Link>
       </div>
     </div>
   )
@@ -758,7 +746,7 @@ function DateLink({ date, text, className }: DateLinkProps) {
   return (
     <HoverCard.Root>
       <HoverCard.Trigger asChild>
-        <Link className={className} to={`/${date}`} target="_blank">
+        <Link className={className} to={`/${date}`}>
           {text || formatDate(date)}
         </Link>
       </HoverCard.Trigger>
@@ -786,7 +774,7 @@ function WeekLink({ week, text, className }: WeekLinkProps) {
   return (
     <HoverCard.Root>
       <HoverCard.Trigger asChild>
-        <Link className={className} to={`/${week}`} target="_blank">
+        <Link className={className} to={`/${week}`}>
           {text || formatWeek(week)}
         </Link>
       </HoverCard.Trigger>
diff --git a/src/components/nav-bar.tsx b/src/components/nav-bar.tsx
index ec6f912d..af740c96 100644
--- a/src/components/nav-bar.tsx
+++ b/src/components/nav-bar.tsx
@@ -1,7 +1,7 @@
 import { TooltipContentProps } from "@radix-ui/react-tooltip"
 import { useAtomValue, useSetAtom } from "jotai"
 import { selectAtom } from "jotai/utils"
-import React from "react"
+import { useHotkeys } from "react-hotkeys-hook"
 import { NavLinkProps, NavLink as RouterNavLink, useMatch, useResolvedPath } from "react-router-dom"
 import { useEvent, useNetworkState } from "react-use"
 import { globalStateMachineAtom } from "../global-state"
@@ -22,10 +22,8 @@ import {
   TagFillIcon24,
   TagIcon24,
 } from "./icons"
-import { usePanelActions, usePanels } from "./panels"
 import { SyncStatusIcon, useSyncStatusText } from "./sync-status"
 import { Tooltip } from "./tooltip"
-import { useHotkeys } from "react-hotkeys-hook"
 
 export function NavBar({ position }: { position: "left" | "bottom" }) {
   const navigate = useNavigateWithCache()
@@ -178,22 +176,7 @@ function NewNoteButton({
   tooltipSide: TooltipContentProps["side"]
   className?: string
 }) {
-  const panels = usePanels()
-  const { openPanel } = usePanelActions()
-  const routerNavigate = useNavigateWithCache()
-
-  const navigate = React.useCallback(
-    (url: string) => {
-      if (openPanel) {
-        // If we're in a panels context, navigate by opening a panel
-        openPanel(url, panels.length - 1)
-      } else {
-        // Otherwise, navigate using the router
-        routerNavigate(url)
-      }
-    },
-    [openPanel, panels, routerNavigate],
-  )
+  const navigate = useNavigateWithCache()
 
   useHotkeys("mod+i", (event) => {
     navigate(`/${Date.now()}`)
diff --git a/src/components/note-card.tsx b/src/components/note-card.tsx
index 8632a4a5..73759fdf 100644
--- a/src/components/note-card.tsx
+++ b/src/components/note-card.tsx
@@ -296,11 +296,7 @@ const _NoteCard = React.memo(function NoteCard({
       <div className="flex items-center justify-between p-2">
         <span className="flex items-center gap-1 px-2 text-text-secondary">
           {note ? (
-            <Link
-              to={`/${id}`}
-              target="_blank"
-              className="link filepath !no-underline hover:!underline"
-            >
+            <Link to={`/${id}`} className="link filepath !no-underline hover:!underline">
               {id}.md
             </Link>
           ) : (
@@ -447,7 +443,9 @@ const _NoteCard = React.memo(function NoteCard({
       <div className="p-4 pt-0">
         {mode === "read" ? (
           editorValue ? (
-            <Markdown onChange={handleChange}>{editorValue}</Markdown>
+            <Markdown onChange={(value) => handleSave({ id, content: value })}>
+              {editorValue}
+            </Markdown>
           ) : (
             <span className="italic text-text-secondary">Empty note</span>
           )
diff --git a/src/components/note-list.tsx b/src/components/note-list.tsx
index 3837a306..b1975368 100644
--- a/src/components/note-list.tsx
+++ b/src/components/note-list.tsx
@@ -3,6 +3,7 @@ import { flushSync } from "react-dom"
 import { useInView } from "react-intersection-observer"
 import { z } from "zod"
 import { useDebouncedValue } from "../hooks/debounced-value"
+import { useNavigateWithCache } from "../hooks/navigate-with-cache"
 import { parseQuery, useSearchNotes } from "../hooks/search"
 import { useSearchParam } from "../hooks/search-param"
 import { templateSchema } from "../schema"
@@ -17,7 +18,6 @@ import { Link } from "./link"
 import { LinkHighlightProvider } from "./link-highlight-provider"
 import { NoteCard } from "./note-card"
 import { NoteFavicon } from "./note-favicon"
-import { usePanel, usePanelActions } from "./panels"
 import { PillButton } from "./pill-button"
 import { SearchInput } from "./search-input"
 
@@ -30,8 +30,7 @@ type NoteListProps = {
 }
 export function NoteList({ baseQuery = "" }: NoteListProps) {
   const searchNotes = useSearchNotes()
-  const { openPanel } = usePanelActions()
-  const panel = usePanel()
+  const navigate = useNavigateWithCache()
 
   const [query, setQuery] = useSearchParam("q", {
     validate: z.string().catch("").parse,
@@ -150,7 +149,7 @@ export function NoteList({ baseQuery = "" }: NoteListProps) {
                 onClick={() => {
                   const resultsCount = noteResults.length
                   const randomIndex = Math.floor(Math.random() * resultsCount)
-                  openPanel?.(noteResults[randomIndex].id, panel?.index)
+                  navigate(`/${noteResults[randomIndex].id}`)
                 }}
               />
             </div>
@@ -256,7 +255,6 @@ export function NoteList({ baseQuery = "" }: NoteListProps) {
                       // Used for focus management
                       data-note-id={note.id}
                       to={`/${note.id}`}
-                      target="_blank"
                       className="focus-ring flex gap-3 rounded-md p-3 leading-4 hover:bg-bg-secondary coarse:p-4"
                     >
                       <NoteFavicon note={note} />
diff --git a/src/components/panel.tsx b/src/components/panel.tsx
index 332388fb..e53c10dc 100644
--- a/src/components/panel.tsx
+++ b/src/components/panel.tsx
@@ -1,15 +1,11 @@
-import clsx from "clsx"
 import React from "react"
-import { DraggableCore } from "react-draggable"
-import { z } from "zod"
-import { useSearchParam } from "../hooks/search-param"
 import { DropdownMenu } from "./dropdown-menu"
 import { IconButton } from "./icon-button"
 import { CloseIcon16, MoreIcon16 } from "./icons"
-import { Panels, usePanel } from "./panels"
 import { cx } from "../utils/cx"
 
 type PanelProps = {
+  // TODO: Remove `id` prop
   id?: string
   className?: string
   title: string
@@ -20,11 +16,7 @@ type PanelProps = {
   onClose?: () => void
 }
 
-const MIN_WIDTH = 560
-const MAX_WIDTH = Number.MAX_SAFE_INTEGER
-
 export function Panel({
-  id,
   className,
   title,
   description,
@@ -33,142 +25,41 @@ export function Panel({
   children,
   onClose,
 }: PanelProps) {
-  const [widthParam, setWidthParam] = useSearchParam("w", {
-    validate: z.string().catch(String(MIN_WIDTH)).parse,
-  })
-
-  const [width, setWidth] = React.useState(parseInt(widthParam))
-  const panelRef = React.useRef<HTMLDivElement>(null)
-  const panel = usePanel()
-  const [activeNoteId, setActiveNoteId] = React.useState("")
-
   return (
-    <Panels.LinkProvider>
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+    <div className={cx("grid h-full grid-rows-[auto_1fr]", className)}>
       <div
-        ref={panelRef}
-        // Used to manage focus of panels
-        data-panel
-        // Used to restore focus to active note when moving focus between panels
-        data-active-note-id={activeNoteId}
-        id={id}
-        className={cx(
-          "sticky left-0 h-full w-screen flex-shrink-0 snap-center border-border-secondary bg-bg-inset focus:outline-none sm:left-[var(--left)] sm:w-[var(--width)] sm:[&:not(:first-of-type)]:border-l [&:not(:last-of-type)]:hidden sm:[&:not(:last-of-type)]:block",
-          className,
-        )}
-        style={{
-          // @ts-ignore TypeScript doesn't know about custom properties
-          "--width": `max(${MIN_WIDTH}px, ${width}px)`,
-          // Stagger sticky offset of panels
-          "--left": panel ? `${(panel.index + 1) * 44}px` : 0,
-        }}
-        onKeyDown={(event) => {
-          // Close with Command + X if no text is selected
-          if (event.metaKey && event.key === "x" && !window.getSelection()?.toString()) {
-            onClose?.()
-            event.preventDefault()
-          }
-        }}
-        onFocus={() => {
-          setActiveNoteId(
-            document.activeElement?.closest<HTMLElement>("[data-note-id]")?.dataset.noteId ?? "",
-          )
-        }}
+        className={
+          "flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border-secondary bg-bg-inset p-2 pl-4 coarse:h-14"
+        }
       >
-        <div className="hidden sm:block">
-          <ResizeHandle
-            value={width}
-            min={MIN_WIDTH}
-            max={MAX_WIDTH}
-            onChange={setWidth}
-            onStop={() => {
-              const panelRect = panelRef.current?.getBoundingClientRect()
-
-              if (panelRect) {
-                setWidth(panelRect.width)
-                setWidthParam(String(panelRect.width))
-              }
-            }}
-          />
+        <div className="flex flex-shrink items-center gap-3">
+          <div className="flex-shrink-0 text-text-secondary">{icon}</div>
+          <div className="flex items-baseline gap-3 overflow-hidden">
+            <h2 className="flex-shrink-0 text-lg font-semibold leading-6">{title}</h2>
+            {description ? (
+              <span className="truncate text-text-secondary">{description}</span>
+            ) : null}
+          </div>
         </div>
-        {/* translateZ(0) fixes a bug in Safari where the scrollbar would appear underneath the sticky header */}
-        <div className="flex h-full scroll-pb-4 scroll-pt-[4.5rem] flex-col overflow-auto coarse:[-webkit-transform:translateZ(0)]">
-          <div
-            className={
-              "sticky top-0 z-10 flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border-secondary bg-bg-inset p-2 pl-4 coarse:h-14"
-            }
-          >
-            <div className="flex flex-shrink items-center gap-3">
-              <div className="flex-shrink-0 text-text-secondary">{icon}</div>
-              <div className="flex items-baseline gap-3 overflow-hidden">
-                <h2 className="flex-shrink-0 text-lg font-semibold leading-6">{title}</h2>
-                {description ? (
-                  <span className="truncate text-text-secondary">{description}</span>
-                ) : null}
-              </div>
-            </div>
-            <div className="flex gap-2">
-              {actions ? (
-                <DropdownMenu modal={false}>
-                  <DropdownMenu.Trigger asChild>
-                    <IconButton aria-label="Panel actions" disableTooltip>
-                      <MoreIcon16 />
-                    </IconButton>
-                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content align="end">{actions}</DropdownMenu.Content>
-                </DropdownMenu>
-              ) : null}
-              {onClose ? (
-                <IconButton aria-label="Close" shortcut={["⌘", "X"]} onClick={() => onClose()}>
-                  <CloseIcon16 />
+        <div className="flex gap-2">
+          {actions ? (
+            <DropdownMenu modal={false}>
+              <DropdownMenu.Trigger asChild>
+                <IconButton aria-label="Panel actions" disableTooltip>
+                  <MoreIcon16 />
                 </IconButton>
-              ) : null}
-            </div>
-          </div>
-          <div className="flex-grow">{children}</div>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content align="end">{actions}</DropdownMenu.Content>
+            </DropdownMenu>
+          ) : null}
+          {onClose ? (
+            <IconButton aria-label="Close" shortcut={["⌘", "X"]} onClick={() => onClose()}>
+              <CloseIcon16 />
+            </IconButton>
+          ) : null}
         </div>
       </div>
-    </Panels.LinkProvider>
-  )
-}
-
-function ResizeHandle({
-  value,
-  onChange,
-  onStop,
-}: {
-  value: number
-  min: number
-  max: number
-  step?: number
-  onChange: (value: number) => void
-  onStop?: () => void
-}) {
-  const draggableRef = React.useRef<HTMLDivElement>(null)
-  const [isDragging, setIsDragging] = React.useState(false)
-  const isResizing = isDragging
-  return (
-    <DraggableCore
-      nodeRef={draggableRef}
-      onStart={() => setIsDragging(true)}
-      onStop={() => {
-        setIsDragging(false)
-        onStop?.()
-      }}
-      onDrag={(event, { deltaX }) => {
-        onChange(value + deltaX)
-        event.preventDefault()
-      }}
-    >
-      <div
-        ref={draggableRef}
-        data-resizing={isDragging}
-        className={clsx(
-          "absolute bottom-0 right-0 top-0 z-20 w-1 cursor-col-resize delay-75",
-          !isResizing && "hover:bg-border-secondary",
-          isResizing && "bg-border-focus",
-        )}
-      />
-    </DraggableCore>
+      <div className="h-full scroll-pb-4 scroll-pt-4 overflow-auto">{children}</div>
+    </div>
   )
 }
diff --git a/src/components/root-layout.tsx b/src/components/root-layout.tsx
index 788f0565..cbe43ffc 100644
--- a/src/components/root-layout.tsx
+++ b/src/components/root-layout.tsx
@@ -1,14 +1,12 @@
 import { useAtomValue, useSetAtom } from "jotai"
 import { selectAtom } from "jotai/utils"
 import React from "react"
-import { useLocation } from "react-router-dom"
 import { useEvent, useNetworkState } from "react-use"
 import { globalStateMachineAtom } from "../global-state"
 import { useThemeColorProvider } from "../hooks/theme-color"
 import { CommandMenu } from "./command-menu"
 import { ErrorIcon16 } from "./icons"
 import { InsertTemplateDialog } from "./insert-template"
-import { Panels } from "./panels"
 import { SyntaxHighlighter } from "./syntax-highlighter"
 
 const errorAtom = selectAtom(globalStateMachineAtom, (state) => state.context.error)
@@ -18,7 +16,6 @@ export function RootLayout({ children }: { children: React.ReactNode }) {
   const error = useAtomValue(errorAtom)
   const send = useSetAtom(globalStateMachineAtom)
   const { online } = useNetworkState()
-  const location = useLocation()
 
   // Sync when the app becomes visible again
   useEvent("visibilitychange", () => {
@@ -33,7 +30,7 @@ export function RootLayout({ children }: { children: React.ReactNode }) {
   })
 
   return (
-    <Panels.Provider key={location.pathname}>
+    <>
       <CommandMenu />
       <InsertTemplateDialog />
       <div className="flex h-screen w-screen flex-col pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)] [@supports(height:100svh)]:h-[100svh]">
@@ -48,7 +45,7 @@ export function RootLayout({ children }: { children: React.ReactNode }) {
         ) : null}
         <DevBar />
       </div>
-    </Panels.Provider>
+    </>
   )
 }
 
diff --git a/src/components/tag-link.tsx b/src/components/tag-link.tsx
index 7436c98f..c213da0e 100644
--- a/src/components/tag-link.tsx
+++ b/src/components/tag-link.tsx
@@ -16,7 +16,6 @@ export function TagLink({ name, className }: TagLinkProps) {
           <React.Fragment key={i}>
             {i > 0 && <span>/</span>}
             <Link
-              target="_blank"
               className="link"
               to={`/tags/${name
                 .split("/")
diff --git a/src/pages/note.tsx b/src/pages/note.tsx
index b323208d..8652645f 100644
--- a/src/pages/note.tsx
+++ b/src/pages/note.tsx
@@ -1,14 +1,8 @@
 import { useParams } from "react-router-dom"
-import { Panels } from "../components/panels"
 import { NotePanel } from "../panels/note"
 
 export function NotePage() {
   const params = useParams()
 
-  return (
-    <Panels.Container>
-      <NotePanel params={params} />
-      <Panels.Outlet />
-    </Panels.Container>
-  )
+  return <NotePanel params={params} />
 }
diff --git a/src/pages/notes.tsx b/src/pages/notes.tsx
index 6e8ba4ea..53de8e29 100644
--- a/src/pages/notes.tsx
+++ b/src/pages/notes.tsx
@@ -1,11 +1,5 @@
-import { Panels } from "../components/panels"
 import { NotesPanel } from "../panels/notes"
 
 export function NotesPage() {
-  return (
-    <Panels.Container>
-      <NotesPanel />
-      <Panels.Outlet />
-    </Panels.Container>
-  )
+  return <NotesPanel />
 }
diff --git a/src/pages/tag.tsx b/src/pages/tag.tsx
index 4ad4f7a1..28be6dfd 100644
--- a/src/pages/tag.tsx
+++ b/src/pages/tag.tsx
@@ -1,14 +1,8 @@
 import { useParams } from "react-router-dom"
-import { Panels } from "../components/panels"
 import { TagPanel } from "../panels/tag"
 
 export function TagPage() {
   const params = useParams()
 
-  return (
-    <Panels.Container>
-      <TagPanel params={params} />
-      <Panels.Outlet />
-    </Panels.Container>
-  )
+  return <TagPanel params={params} />
 }
diff --git a/src/pages/tags.tsx b/src/pages/tags.tsx
index d7235d37..4797f2e8 100644
--- a/src/pages/tags.tsx
+++ b/src/pages/tags.tsx
@@ -1,11 +1,5 @@
-import { Panels } from "../components/panels"
 import { TagsPanel } from "../panels/tags"
 
 export function TagsPage() {
-  return (
-    <Panels.Container>
-      <TagsPanel />
-      <Panels.Outlet />
-    </Panels.Container>
-  )
+  return <TagsPanel />
 }
diff --git a/src/panels/daily.tsx b/src/panels/daily.tsx
index 6aa07df4..7b3afe91 100644
--- a/src/panels/daily.tsx
+++ b/src/panels/daily.tsx
@@ -27,6 +27,7 @@ export function DailyPanel({ id, params = {}, onClose }: PanelProps) {
   return (
     <Panel
       id={id}
+      key={date}
       title={formatDate(date)}
       description={formatDateDistance(date)}
       icon={<CalendarIcon16 number={new Date(date).getUTCDate()} />}
@@ -34,7 +35,7 @@ export function DailyPanel({ id, params = {}, onClose }: PanelProps) {
     >
       <div className="flex flex-col">
         <Calendar key={date} activeNoteId={date} />
-        <div className="flex flex-col gap-4 p-4">
+        <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 p-4">
           <NoteCard id={date} defaultValue={dailyTemplate} />
           {backlinks.length > 0 ? (
             <Details>
diff --git a/src/panels/note.tsx b/src/panels/note.tsx
index 046510ae..c0c0730b 100644
--- a/src/panels/note.tsx
+++ b/src/panels/note.tsx
@@ -29,7 +29,7 @@ export function NotePanel({ id, params = {}, onClose }: PanelProps) {
       icon={!note || note.frontmatter.template ? <NoteTemplateIcon16 /> : <NoteIcon16 />}
       onClose={onClose}
     >
-      <div className="flex flex-col gap-4 p-4">
+      <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 p-4">
         <NoteCard id={noteId} />
         {note?.backlinks?.length ? (
           <Details>
diff --git a/src/panels/notes.tsx b/src/panels/notes.tsx
index 40c0a60c..d7ec36c3 100644
--- a/src/panels/notes.tsx
+++ b/src/panels/notes.tsx
@@ -23,7 +23,7 @@ export function NotesPanel({ id, onClose }: PanelProps) {
 
   return (
     <Panel id={id} title="Notes" icon={<NoteIcon16 />} onClose={onClose}>
-      <div className="p-4">
+      <div className="mx-auto max-w-3xl p-4">
         {isEmpty ? (
           <div className="flex w-full flex-col gap-4">
             <div className="flex flex-col gap-1">
diff --git a/src/panels/tag.tsx b/src/panels/tag.tsx
index bb457e41..677cbff4 100644
--- a/src/panels/tag.tsx
+++ b/src/panels/tag.tsx
@@ -51,7 +51,7 @@ export function TagPanel({ id, params = {}, onClose }: PanelProps) {
       onClose={onClose}
     >
       <LinkHighlightProvider href={`/tags/${name}`}>
-        <div className="p-4">
+        <div className="mx-auto max-w-3xl p-4">
           {isRenaming ? (
             <Card className="mb-4 p-4">
               <div className="mb-4 flex items-center justify-between">
@@ -61,7 +61,7 @@ export function TagPanel({ id, params = {}, onClose }: PanelProps) {
               </div>
               <form
                 aria-labelledby="rename-tag-heading"
-                className="grid gap-4"
+                className="flex flex-col items-end gap-4"
                 onSubmit={(event) => {
                   event.preventDefault()
                   const formData = new FormData(event.currentTarget)
@@ -78,7 +78,7 @@ export function TagPanel({ id, params = {}, onClose }: PanelProps) {
                 <label htmlFor="name" className="sr-only">
                   Name
                 </label>
-                <div className="flex  gap-2">
+                <div className="flex w-full gap-2">
                   <TextInput
                     ref={nameInputRef}
                     id="name"
@@ -96,7 +96,7 @@ export function TagPanel({ id, params = {}, onClose }: PanelProps) {
                     }}
                   />
                 </div>
-                <div className="grid grid-cols-2 gap-2">
+                <div className="flex gap-2">
                   <Button variant="secondary" onClick={closeRenameForm}>
                     Cancel
                   </Button>
diff --git a/src/panels/tags.tsx b/src/panels/tags.tsx
index e3578353..ec65e4b6 100644
--- a/src/panels/tags.tsx
+++ b/src/panels/tags.tsx
@@ -32,7 +32,7 @@ export function TagsPanel({ id, onClose }: PanelProps) {
 
   return (
     <Panel id={id} title="Tags" icon={<TagIcon16 />} onClose={onClose}>
-      <div className="flex flex-col gap-2 p-4">
+      <div className="mx-auto flex max-w-3xl flex-col gap-2 p-4">
         <div className="flex flex-col gap-2">
           <SearchInput
             placeholder={`Search ${pluralize(sortedTagEntries.length, "tag")}…`}
@@ -136,7 +136,7 @@ function TagTreeItem({ node, path = [], depth = 0 }: TagTreeItemProps) {
         )}
         <span className="py-2 leading-4 ">
           <PillButton asChild>
-            <Link to={`/tags/${[...path, node.name].join("/")}`} target="_blank">
+            <Link to={`/tags/${[...path, node.name].join("/")}`}>
               {node.name}
               <span className="text-text-secondary">{node.count}</span>
             </Link>
diff --git a/src/panels/weekly.tsx b/src/panels/weekly.tsx
index 098104ce..40a94c24 100644
--- a/src/panels/weekly.tsx
+++ b/src/panels/weekly.tsx
@@ -43,7 +43,7 @@ export function WeeklyPanel({ id, params = {}, onClose }: PanelProps) {
     >
       <div className="flex flex-col">
         <Calendar key={week} activeNoteId={week} />
-        <div className="flex flex-col gap-4 p-4">
+        <div className="mx-auto flex max-w-3xl flex-col gap-4 p-4">
           <NoteCard id={week} defaultValue={weeklyTemplate} />
 
           <Details>
diff --git a/src/styles/cmdk.css b/src/styles/cmdk.css
index fbac3e61..c110c70f 100644
--- a/src/styles/cmdk.css
+++ b/src/styles/cmdk.css
@@ -3,7 +3,7 @@
 }
 
 [cmdk-dialog] {
-  @apply fixed left-1/2 top-2 z-20 w-[calc(100vw_-_1rem)] max-w-xl -translate-x-1/2 sm:top-[10vh];
+  @apply fixed left-1/2 top-2 z-20 w-[calc(100vw_-_1rem)] max-w-2xl -translate-x-1/2 sm:top-[10vh];
 }
 
 [cmdk-input] {