Unship panel layout

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]",

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`

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>

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()}`)

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>
           )

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} />