[feat] ability to show frontmatter properties in the sidebar

src/components/frontmatter-sidebar.tsx

@@ -0,0 +1,30 @@
+import { useAtom } from "jotai"
+import { frontmatterSidebarAtom } from "../global-state"
+import { IconButton } from "./icon-button"
+import { ArrowLeftIcon16 } from "./icons"
+import { Frontmatter } from "./markdown"
+
+export function FrontmatterSidebar({ frontmatter }: { frontmatter: Record<string, unknown> }) {
+  const [isOpen, setIsOpen] = useAtom(frontmatterSidebarAtom)
+
+  if (!isOpen) return null
+
+  return (
+    <div className="right-2 absolute border rounded border-border-secondary grid w-64 flex-shrink-0 grid-rows-[auto_1fr] overflow-hidden">
+      <div className="flex w-full justify-between border-b border-border-secondary p-2">
+        <span className="text-sm font-medium">Properties</span>
+        <IconButton
+          aria-label="Close properties sidebar"
+          tooltipSide="left"
+          size="small"
+          onClick={() => setIsOpen(false)}
+        >
+          <ArrowLeftIcon16 />
+        </IconButton>
+      </div>
+      <div className="overflow-auto p-4">
+        <Frontmatter frontmatter={frontmatter} />
+      </div>
+    </div>
+  )
+}

src/components/markdown.tsx

@@ -1,7 +1,7 @@
 import * as HoverCard from "@radix-ui/react-hover-card"
 import { Link } from "@tanstack/react-router"
 import { isToday } from "date-fns"
-import { useAtomValue } from "jotai"
+import { useAtom, useAtomValue } from "jotai"
 import { selectAtom } from "jotai/utils"
 import React, { useMemo } from "react"
 import ReactMarkdown from "react-markdown"
@@ -12,7 +12,7 @@ import rehypeRaw from "rehype-raw"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
 import { z } from "zod"
-import { notesAtom } from "../global-state"
+import { notesAtom, frontmatterSidebarAtom, widthAtom } from "../global-state"
 import { UPLOADS_DIR } from "../hooks/attach-file"
 import { useNoteById } from "../hooks/note"
 import { useSearchNotes } from "../hooks/search"
@@ -41,10 +41,12 @@ import { Details } from "./details"
 import { FilePreview } from "./file-preview"
 import { GitHubAvatar } from "./github-avatar"
 import {
+  ArrowRightIcon16,
   BlueskyIcon16,
   ErrorIcon16,
   GitHubIcon16,
   InstagramIcon16,
+  SidebarIcon16,
   TwitterIcon16,
   YouTubeIcon16,
 } from "./icons"
@@ -55,6 +57,8 @@ import { SyntaxHighlighter, TemplateSyntaxHighlighter } from "./syntax-highlight
 import { TagLink } from "./tag-link"
 import { Tooltip } from "./tooltip"
 import { WebsiteFavicon } from "./website-favicon"
+import { IconButton } from "./icon-button"
+import { FrontmatterSidebar } from "./frontmatter-sidebar"
 
 export type MarkdownProps = {
   children: string
@@ -85,6 +89,8 @@ export const Markdown = React.memo(
         }),
       )
     }, [frontmatter])
+    const [isFrontmatterSidebarOpen, setIsFrontmatterSidebarOpen] = useAtom(frontmatterSidebarAtom)
+    const width = useAtomValue(widthAtom)
 
     // Split the content into title and body so we can display
     // the frontmatter below the title but above the body.
@@ -166,14 +172,32 @@ export const Markdown = React.memo(
                   <GitHubAvatar login={frontmatter.github} size={64} className="!size-16" />
                 </div>
               ) : null}
-              <div className="flex flex-col gap-5">
+              <div
+                className={cx("flex flex-col gap-5", {
+                  "mr-64": width === "fill" && isFrontmatterSidebarOpen,
+                  "mr-16": width === "fixed" && isFrontmatterSidebarOpen,
+                })}
+              >
+                   {!hideFrontmatter && !isObjectEmpty(filteredFrontmatter) && (
+                <FrontmatterSidebar frontmatter={filteredFrontmatter} />
+              )}
                 <div className="flex flex-col gap-5 empty:hidden">
                   {title ? <MarkdownContent>{title}</MarkdownContent> : null}
                   {filteredFrontmatter &&
                   !hideFrontmatter &&
-                  !isObjectEmpty(filteredFrontmatter) ? (
+                  !isObjectEmpty(filteredFrontmatter) &&
+                  !isFrontmatterSidebarOpen ? (
                     <Details>
-                      <Details.Summary>Properties</Details.Summary>
+                      <Details.Summary>
+                        Properties
+                        <IconButton
+                          aria-label="Toggle properties sidebar"
+                          size="small"
+                          onClick={() => setIsFrontmatterSidebarOpen(!isFrontmatterSidebarOpen)}
+                        >
+                          <SidebarIcon16 className="rotate-180" />
+                        </IconButton>
+                      </Details.Summary>
                       <div className="pl-6">
                         <Frontmatter frontmatter={filteredFrontmatter} />
                       </div>
@@ -207,6 +231,7 @@ export const Markdown = React.memo(
                   }
                 </div>
               </div>
+
             </>
           )}
         </div>
@@ -297,7 +322,7 @@ function BookCover({ isbn }: { isbn: string }) {
   )
 }
 
-function Frontmatter({
+export function Frontmatter({
   frontmatter,
   className,
 }: {

src/global-state.ts

@@ -739,6 +739,8 @@ export const fontAtom = atomWithStorage<"sans" | "serif" | "handwriting">("font"
 
 export const sidebarAtom = atomWithStorage<"expanded" | "collapsed">("sidebar", "expanded")
 
+export const frontmatterSidebarAtom = atomWithStorage<boolean>("frontmatter-sidebar", false)
+
 export const widthAtom = atomWithStorage<"fixed" | "fill">("width", "fixed")
 
 // -----------------------------------------------------------------------------