refactor: convert to bun workspaces monorepo

- Move web app into apps/web/
- Create packages/shared/ with shared types
- Create plugins/decky-vault/ scaffold
- Root package.json manages workspaces only

apps/web/components/updates/chapter-nav.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { ListIcon } from "lucide-react"
+import type { UpdateHeading } from "@/lib/updates"
+
+export function ChapterNav({
+  headings,
+}: {
+  headings: UpdateHeading[]
+}) {
+  const [activeId, setActiveId] = useState<string>(headings[0]?.id ?? "")
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  useEffect(() => {
+    const observers: IntersectionObserver[] = []
+
+    headings.forEach((heading) => {
+      const element = document.getElementById(heading.id)
+      if (!element) return
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setActiveId(heading.id)
+            }
+          })
+        },
+        {
+          rootMargin: "-20% 0px -70% 0px",
+        },
+      )
+      observer.observe(element)
+      observers.push(observer)
+    })
+
+    return () => {
+      observers.forEach((observer) => observer.disconnect())
+    }
+  }, [headings])
+
+  if (headings.length === 0) return null
+
+  return (
+    <>
+      {/* Mobile toggle button */}
+      <button
+        onClick={() => setMobileOpen(!mobileOpen)}
+        className="fixed bottom-4 right-4 z-50 md:hidden flex items-center justify-center w-10 h-10 rounded-full bg-background border border-border shadow-lg hover:border-border-active transition-colors cursor-pointer"
+        aria-label="Toggle chapter navigation"
+      >
+        <ListIcon className="w-5 h-5" />
+      </button>
+
+      {/* Mobile dropdown */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-45 md:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+      <nav
+        className={`fixed bottom-16 right-4 z-50 md:z-auto md:static md:block max-h-[50vh] md:max-h-none overflow-y-auto bg-background border border-border rounded-lg p-3 shadow-lg md:shadow-none md:rounded-none md:border-0 md:p-0 md:bg-transparent transition-all md:transition-none ${
+          mobileOpen
+            ? "block opacity-100"
+            : "hidden md:block opacity-0 md:opacity-100"
+        }`}
+      >
+        <h4 className="text-xs uppercase text-text/40 font-semibold mb-2 hidden md:block">
+          Chapters
+        </h4>
+        <ul className="flex flex-col gap-1">
+          {headings.map((heading) => (
+            <li key={heading.id}>
+              <a
+                href={`#${heading.id}`}
+                onClick={() => setMobileOpen(false)}
+                className={`block text-sm py-1 transition-colors ${
+                  heading.level === 3 ? "pl-3" : ""
+                } ${
+                  activeId === heading.id
+                    ? "text-primary font-medium"
+                    : "text-text/60 hover:text-text"
+                }`}
+              >
+                {heading.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </>
+  )
+}

apps/web/components/updates/reading-progress-bar.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export function ReadingProgressBar() {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const scrollTop = window.scrollY
+      const scrollHeight = document.documentElement.scrollHeight
+      const clientHeight = window.innerHeight
+      const maxScroll = scrollHeight - clientHeight
+
+      if (maxScroll <= 0) {
+        setProgress(0)
+        return
+      }
+
+      setProgress((scrollTop / maxScroll) * 100)
+    }
+
+    window.addEventListener("scroll", updateProgress, { passive: true })
+    updateProgress()
+
+    return () => window.removeEventListener("scroll", updateProgress)
+  }, [])
+
+  return (
+    <div className="fixed top-[3.6rem] left-0 right-0 z-40 h-0.5 bg-border">
+      <div
+        className="h-full bg-primary transition-[width] duration-150 ease-out"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  )
+}

apps/web/components/updates/update-card.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link"
+import type { UpdateMeta } from "@/lib/updates"
+
+export function UpdateCard({ update }: { update: UpdateMeta }) {
+    const formattedDate = new Date(update.date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+    })
+
+    return (
+        <Link href={`/updates/${update.slug}`}>
+            <article className='group flex flex-col gap-2 p-4 border border-border rounded-md hover:bg-text/3 transition-colors'>
+                <div className='flex flex-row items-center gap-2'>
+                    <span className='text-xs font-mono px-2 py-0.5 rounded bg-primary/10 text-primary border border-primary/20'>
+                        v{update.version}
+                    </span>
+                    <time className='text-xs text-text/60'>
+                        {formattedDate}
+                    </time>
+                </div>
+                <h3 className='text-lg font-semibold group-hover:text-primary transition-colors'>
+                    {update.title}
+                </h3>
+                <p className='text-sm text-text/60 line-clamp-2'>
+                    {update.summary}
+                </p>
+            </article>
+        </Link>
+    )
+}

apps/web/components/updates/update-viewer.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { ReadingProgressBar } from "./reading-progress-bar"
+import { ChapterNav } from "./chapter-nav"
+import type { UpdateContent } from "@/lib/updates"
+
+export function UpdateViewer({
+  update,
+}: {
+  update: UpdateContent
+}) {
+  const formattedDate = new Date(update.meta.date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  })
+
+  return (
+    <>
+      <ReadingProgressBar />
+      <div className="w-full max-w-7xl mx-auto px-4 py-8 flex flex-row gap-8">
+        {/* Chapter navigation sidebar (desktop) */}
+        <aside className="hidden md:block w-48 shrink-0">
+          <div className="sticky top-20">
+            <ChapterNav headings={update.headings} />
+          </div>
+        </aside>
+
+        {/* Main content */}
+        <article className="flex-1 min-w-0 prose prose-invert lg:proxe-xl">
+          <header className="mb-8">
+            <div className="flex flex-row items-center gap-2 mb-2">
+              <span className="text-xs font-mono px-2 py-0.5 rounded bg-primary/10 text-primary border border-primary/20">
+                v{update.meta.version}
+              </span>
+              <time className="text-sm text-text/60">{formattedDate}</time>
+            </div>
+            <h1 className="text-2xl md:text-3xl font-bold">{update.meta.title}</h1>
+          </header>
+          <div
+            className="update-content max-w-none"
+            dangerouslySetInnerHTML={{ __html: update.html }}
+          />
+        </article>
+      </div>
+
+      {/* Mobile chapter nav (rendered inside viewer for context) */}
+      <div className="md:hidden">
+        <ChapterNav headings={update.headings} />
+      </div>
+    </>
+  )
+}