seemore 1.7.0 → 1.8.1

package/README.md

@@ -126,7 +126,7 @@ Install **seemore** from the [VS Code Marketplace](https://marketplace.visualstu
 | --- | --- | --- |
 | **Open in seemore** | Editor title bar, on any Markdown file | Renders that file's folder as a site |
 | **Open Folder in seemore** | Explorer, right-click a folder | Renders that folder as a site and pins it as the root |
-| **Pin Current Root** | Status bar item, while a site is open | Pins the currently-serving root for this workspace |
+| **Choose Root** | Status bar item, or the command palette | Pins the folder being served, clears a pinned root, or picks another folder to serve |
 
 ### Settings
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Let AI write the Markdown. Let seemore show it better — zero config documentation framework.",
   "license": "MIT",
   "type": "module",

package/src/app/layout/Header.tsx

@@ -4,18 +4,32 @@ import { useSearchContext } from 'fumadocs-ui/contexts/search';
 import { SidebarTrigger } from 'fumadocs-ui/components/sidebar/base';
 import { useTheme } from 'fumadocs-ui/provider/base';
 import { config } from 'virtual:seemore/config';
+import { useSidebarCollapse } from './Sidebar.js';
 
 export function Header() {
   const search = useSearchContext();
   const { resolvedTheme, setTheme } = useTheme();
   const location = useLocation();
+  const { collapsed, toggle } = useSidebarCollapse();
 
   return (
     <header className="seemore-header">
+      {/* Two triggers, one slot: below `md` the sidebar is a drawer this opens over the page,
+          and at `md` and up it is a rail this hides, leaving the article the room. */}
       <SidebarTrigger className="seemore-sidebar-trigger" aria-label="Toggle navigation">
         <PanelLeft />
       </SidebarTrigger>
 
+      <button
+        type="button"
+        className="seemore-sidebar-collapse"
+        aria-label={collapsed ? 'Show navigation' : 'Hide navigation'}
+        aria-expanded={!collapsed}
+        onClick={toggle}
+      >
+        <PanelLeft aria-hidden="true" />
+      </button>
+
       <Link to="/" className="seemore-brand" viewTransition>
         {config.title}
       </Link>

package/src/app/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, type ComponentProps, type ReactNode } from 'react';
+import { useCallback, useEffect, useLayoutEffect, type ComponentProps, type ReactNode } from 'react';
 import {
   SidebarFolder as BaseFolder,
   SidebarFolderContent as BaseFolderContent,
@@ -43,12 +43,55 @@ const styled = {
 
 const renderPageTree = createPageTreeRenderer(styled);
 
+const COLLAPSE_KEY = 'seemore:sidebar-collapsed';
+
+/* `useLayoutEffect` does nothing on the server and says so in a warning; the prerender pass
+   takes `useEffect`, which it never runs either. */
+const useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+
+/**
+ * Hiding the rail is a reader's preference, like the theme, so it outlives the page rather
+ * than resetting on the next load. fumadocs owns the state itself — every primitive reads
+ * `collapsed` from the same context — this only teaches it to persist, and gives the header
+ * a trigger to call.
+ */
+export function useSidebarCollapse(): { collapsed: boolean; toggle: () => void } {
+  const { collapsed, setCollapsed } = useSidebar();
+
+  const toggle = useCallback(() => {
+    const next = !collapsed;
+    try {
+      localStorage.setItem(COLLAPSE_KEY, String(next));
+    } catch {
+      // Storage blocked, private window: the choice just does not outlive the page.
+    }
+    setCollapsed(next);
+  }, [collapsed, setCollapsed]);
+
+  return { collapsed, toggle };
+}
+
+/** Applied before paint, so a remembered collapse does not flash the rail open first. */
+function useRestoreCollapse(): void {
+  const { setCollapsed } = useSidebar();
+
+  useIsomorphicLayoutEffect(() => {
+    try {
+      if (localStorage.getItem(COLLAPSE_KEY) === 'true') setCollapsed(true);
+    } catch {
+      // Nothing readable is nothing to restore; the rail stays open.
+    }
+  }, [setCollapsed]);
+}
+
 export function Sidebar({ children }: { children?: ReactNode }) {
   // Below `md` the sidebar is a drawer, and the header's trigger is what opens it. Without
   // reading that state the trigger is decorative: the panel is hidden by CSS alone.
-  const { open, setOpen } = useSidebar();
+  const { open, setOpen, collapsed } = useSidebar();
   const url = useRouteUrl();
 
+  useRestoreCollapse();
+
   // Following a link should not leave the drawer covering the page you asked for.
   useEffect(() => {
     setOpen(false);
@@ -79,7 +122,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
         />
       ) : undefined}
 
-      <div className="seemore-sidebar-column" data-open={open}>
+      <div className="seemore-sidebar-column" data-open={open} data-collapsed={collapsed}>
         <aside className="seemore-sidebar" aria-label="Documentation navigation">
           {/* `toc.integrate` passes the table of contents as children: it belongs inside the
               viewport, so nav and TOC scroll together rather than the TOC sitting below a

package/src/app/styles/globals.css

@@ -26,8 +26,31 @@
     @apply truncate;
   }
 
+  /* One glyph in one slot, whichever trigger is showing: at header scale the panel icon
+     reads as "navigation", and which way it will move is the label's job, not a second
+     arrow's. Sized and muted to sit with the search and theme buttons rather than shout
+     over them. */
+  .seemore-sidebar-trigger,
+  .seemore-sidebar-collapse {
+    @apply shrink-0 rounded-lg p-1.5 text-fd-muted-foreground transition-colors;
+  }
+
+  .seemore-sidebar-trigger:hover,
+  .seemore-sidebar-collapse:hover {
+    @apply bg-fd-accent text-fd-accent-foreground;
+  }
+
+  .seemore-sidebar-trigger svg,
+  .seemore-sidebar-collapse svg {
+    @apply size-5;
+  }
+
   .seemore-sidebar-trigger {
-    @apply shrink-0 md:hidden;
+    @apply md:hidden;
+  }
+
+  .seemore-sidebar-collapse {
+    @apply hidden md:inline-flex;
   }
 
   .seemore-brand {
@@ -152,12 +175,21 @@
     @apply translate-x-0 rtl:translate-x-0;
   }
 
+  /* Collapse is the rail's state alone. Below `md` the same column is the drawer, which has
+     its own trigger and its own reason to be open, so the collapsed choice must not reach it. */
+  .seemore-sidebar-column[data-collapsed='true'] {
+    @apply md:hidden;
+  }
+
   .seemore-sidebar-backdrop {
     @apply fixed inset-0 z-30 bg-black/40 md:hidden;
   }
 
+  /* A flex column, so the site footer can take `mt-auto`: on a page too short to fill the
+     viewport it settles at the bottom instead of floating mid-screen, and on a long one the
+     `gap-10` is all that separates it from the content above. */
   .seemore-main {
-    @apply mx-auto min-w-0 max-w-3xl flex-1 px-4 py-8 md:px-8;
+    @apply mx-auto flex min-w-0 max-w-3xl flex-1 flex-col gap-10 px-4 py-8 md:px-8;
   }
 
   /* Docs are full of long identifiers — `EmbeddedPaymentsController`,
@@ -195,7 +227,7 @@
   }
 
   .seemore-page-footer {
-    @apply mt-10 grid grid-cols-2 gap-4 border-t border-fd-border pt-6 text-sm;
+    @apply grid grid-cols-2 gap-4 border-t border-fd-border pt-6 text-sm;
   }
 
   .seemore-next {
@@ -207,11 +239,11 @@
   }
 
   .seemore-edit-link {
-    @apply mt-8 inline-flex items-center gap-2 text-sm text-fd-muted-foreground;
+    @apply inline-flex items-center gap-2 self-start text-sm text-fd-muted-foreground;
   }
 
   .seemore-site-footer {
-    @apply mt-10 flex flex-wrap gap-4 border-t border-fd-border pt-6 text-sm text-fd-muted-foreground;
+    @apply mt-auto flex flex-wrap gap-4 border-t border-fd-border pt-6 text-sm text-fd-muted-foreground;
   }
 
   /* The generated index page: pages as cards, folders as titled sections of cards. */