@lapis-notes/lapis-plugin-docs 0.0.0-stage → 0.2.0

package/dist/docs/DocsFolderDirectoryList.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  import "./DocsFolderPanel.css";
+
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+
+  import {
+    getActiveFolderNote,
+    getActiveFolderTagKey,
+    getFolderNotePanels,
+    getFolderNotes,
+    getMatchingFolderTags,
+    isDocsSidebarPanelActive,
+    resolveDocsSidebarPanelSelection,
+  } from "./docs-folder-directory";
+  import type { DocsNote, DocsNotePanel, DocsNoteSummary, DocsWorkspace, DocsWorkspaceIndex } from '../model';
+
+  let {
+    workspace = null,
+    activeTag = null,
+    activeNoteId = null,
+    activePanel = "note",
+    onSelectNote = () => {},
+    onSelectPanel = () => {},
+    onSelectTag = () => {},
+  }: {
+    workspace?: DocsWorkspace | DocsWorkspaceIndex | null;
+    activeTag?: string | null;
+    activeNoteId?: string | null;
+    activePanel?: DocsNotePanel;
+    onSelectNote?: (noteId: string) => void;
+    onSelectPanel?: (panel: DocsNotePanel) => void;
+    onSelectTag?: (tag: string) => void;
+  } = $props();
+
+  let expandedNoteIds = $state<Record<string, boolean>>({});
+
+  const folderNotes = $derived(getFolderNotes(workspace, activeTag));
+  const activeFolderNote = $derived(getActiveFolderNote(folderNotes, activeNoteId));
+  const matchingTags = $derived(getMatchingFolderTags(activeTag, activeFolderNote));
+  const activeTagKey = $derived(getActiveFolderTagKey(activeTag));
+  const TREE_ROW_BASE_INDENT_REM = 0.25;
+  const TREE_ROW_DEPTH_INDENT_REM = 0.875;
+  const TREE_GUIDE_BASE_LEFT_REM = 0.75;
+  const TREE_PANEL_LABEL_OFFSET_REM = 1.75;
+  const TREE_PANEL_PARENT_GUIDE_OFFSET_REM = 0;
+
+  function notePanels(note: DocsNote | DocsNoteSummary) {
+    return getFolderNotePanels(workspace, note);
+  }
+
+  function isNoteExpanded(noteId: string) {
+    return activeNoteId === noteId
+      ? (expandedNoteIds[noteId] ?? true)
+      : (expandedNoteIds[noteId] ?? false);
+  }
+
+  function setNoteExpanded(noteId: string, open: boolean) {
+    expandedNoteIds = open
+      ? {
+          [noteId]: true,
+          ...(activeNoteId && activeNoteId !== noteId
+            ? { [activeNoteId]: false }
+            : {}),
+        }
+      : { [noteId]: false };
+  }
+
+  function treeRowStyle(depth: number) {
+    const safeDepth = Math.max(depth, 0);
+    return `padding-left: ${TREE_ROW_BASE_INDENT_REM + safeDepth * TREE_ROW_DEPTH_INDENT_REM}rem`;
+  }
+
+  function treePanelRowStyle(depth: number) {
+    const safeDepth = Math.max(depth, 0);
+    return `padding-left: ${
+      TREE_ROW_BASE_INDENT_REM +
+      safeDepth * TREE_ROW_DEPTH_INDENT_REM +
+      TREE_PANEL_LABEL_OFFSET_REM
+    }rem`;
+  }
+
+  function treeGuideStyle(depth: number, offsetRem = 0) {
+    return `left: ${TREE_GUIDE_BASE_LEFT_REM + depth * TREE_ROW_DEPTH_INDENT_REM + offsetRem}rem`;
+  }
+
+  function treeGuideDepths(depth: number) {
+    return Array.from({ length: Math.max(depth, 0) }, (_, index) => index);
+  }
+
+  function toggleNoteRow(noteId: string) {
+    if (activeNoteId === noteId) {
+      setNoteExpanded(noteId, !isNoteExpanded(noteId));
+      return;
+    }
+    selectNote(noteId);
+  }
+
+  function toggleNoteExpanded(noteId: string) {
+    setNoteExpanded(noteId, !isNoteExpanded(noteId));
+  }
+
+  function selectNote(noteId: string) {
+    setNoteExpanded(noteId, true);
+    onSelectNote(noteId);
+  }
+
+  function selectNotePanel(noteId: string, panel: DocsNotePanel) {
+    setNoteExpanded(noteId, true);
+    if (activeNoteId !== noteId) onSelectNote(noteId);
+    onSelectPanel(resolveDocsSidebarPanelSelection(panel));
+  }
+
+  function isNotePanelActive(panel: DocsNotePanel) {
+    return isDocsSidebarPanelActive(activePanel, panel);
+  }
+</script>
+
+{#snippet TreeGuides({ depth, finalGuideOffsetRem = 0 }: { depth: number; finalGuideOffsetRem?: number })}
+  {#each treeGuideDepths(depth) as guideDepth (guideDepth)}
+    <span
+      aria-hidden="true"
+      class="docs-folder-panel__indent-guide"
+      style={treeGuideStyle(
+        guideDepth,
+        guideDepth === depth - 1 ? finalGuideOffsetRem : 0,
+      )}
+      data-folder-panel-indent-guide={guideDepth}
+    ></span>
+  {/each}
+{/snippet}
+
+{#if activeTag}
+  <div class="docs-folder-panel__body">
+    <ScrollArea.Root class="docs-folder-panel__list">
+      <div class="docs-folder-panel__list-content">
+        {#each folderNotes as note (note.id)}
+        {@const expanded = isNoteExpanded(note.id)}
+        {@const active = note.id === activeNoteId}
+        <div class="docs-folder-panel__note-group">
+          <button
+            type="button"
+            class="docs-folder-panel__note-row"
+            style={treeRowStyle(0)}
+            aria-expanded={expanded}
+            data-folder-panel-note-row={note.id}
+            onclick={() => toggleNoteRow(note.id)}
+          >
+            <ChevronRightIcon
+              class={expanded
+                ? "docs-folder-panel__tree-chevron expanded"
+                : "docs-folder-panel__tree-chevron"}
+              data-icon="inline-start"
+            />
+            <span>{note.title}</span>
+          </button>
+          {#if expanded}
+            <div class="docs-folder-panel__children" data-folder-panel-note-panels={note.id}>
+              {#each notePanels(note) as panel (panel.id)}
+                <button
+                  type="button"
+                  class:active={active && isNotePanelActive(panel.id)}
+                  class="docs-folder-panel__child"
+                  style={treePanelRowStyle(0)}
+                  aria-label={typeof panel.count === "number"
+                    ? `${note.title} ${panel.label} ${panel.count}`
+                    : `${note.title} ${panel.label}`}
+                  aria-current={active && isNotePanelActive(panel.id) ? "true" : undefined}
+                  onclick={() => selectNotePanel(note.id, panel.id)}
+                >
+                  {@render TreeGuides({
+                    depth: 1,
+                    finalGuideOffsetRem: TREE_PANEL_PARENT_GUIDE_OFFSET_REM,
+                  })}
+                  <span>{panel.label}</span>
+                  {#if typeof panel.count === "number"}
+                    <span class="docs-folder-panel__child-count">{panel.count}</span>
+                  {/if}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {:else}
+        <p class="docs-folder-panel__empty">No notes use this folder yet.</p>
+        {/each}
+      </div>
+    </ScrollArea.Root>
+    {#if matchingTags.length}
+      <div class="docs-folder-panel__tags" aria-label="Matching tags">
+        {#each matchingTags as tag (tag)}
+          <button
+            type="button"
+            class="docs-folder-panel__tag-chip"
+            class:active={activeTagKey === tag.toLowerCase()}
+            aria-pressed={activeTagKey === tag.toLowerCase()}
+            title={`#${tag}`}
+            onclick={() => onSelectTag(tag)}
+          >
+            #{tag}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/docs/DocsFolderDirectoryList.svelte.d.ts

@@ -0,0 +1,14 @@
+import "./DocsFolderPanel.css";
+import type { DocsNotePanel, DocsWorkspace, DocsWorkspaceIndex } from '../model';
+type $$ComponentProps = {
+    workspace?: DocsWorkspace | DocsWorkspaceIndex | null;
+    activeTag?: string | null;
+    activeNoteId?: string | null;
+    activePanel?: DocsNotePanel;
+    onSelectNote?: (noteId: string) => void;
+    onSelectPanel?: (panel: DocsNotePanel) => void;
+    onSelectTag?: (tag: string) => void;
+};
+declare const DocsFolderDirectoryList: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsFolderDirectoryList = ReturnType<typeof DocsFolderDirectoryList>;
+export default DocsFolderDirectoryList;

package/dist/docs/DocsFolderPanel.css

@@ -0,0 +1,357 @@
+.docs-folder-panel {
+  display: flex;
+  flex: 0 0 17rem;
+  align-self: stretch;
+  min-height: 0;
+  max-width: 17rem;
+  flex-direction: column;
+  background: color-mix(in srgb, var(--docs-subtle) 42%, var(--docs-surface));
+  color: var(--foreground, #111);
+}
+
+.docs-folder-panel--collapsed {
+  flex-basis: 3rem;
+  max-width: 3rem;
+  align-items: center;
+  border-left: 1px solid var(--docs-border);
+  border-right: 1px solid var(--docs-border);
+  padding: 0.5rem 0.35rem;
+}
+
+.docs-folder-panel__collapsed-trigger {
+  display: flex;
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.65rem;
+  border: 1px solid transparent;
+  border-radius: 0.4rem;
+  background: transparent;
+  color: var(--docs-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.55rem 0.35rem;
+}
+
+.docs-folder-panel__collapsed-trigger span {
+  max-width: 1.25rem;
+  max-height: min(28rem, calc(100% - 2rem));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.1;
+  writing-mode: vertical-rl;
+}
+
+.docs-folder-panel__collapsed-trigger:hover,
+.docs-folder-panel__collapsed-trigger:focus-visible {
+  border-color: var(--docs-border);
+  background: var(--docs-surface);
+  color: var(--foreground, #111);
+  outline: 0;
+}
+
+.docs-folder-panel__header {
+  display: flex;
+  min-height: 3.75rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--docs-border);
+  background: var(--docs-surface);
+  padding: 0.55rem 0.65rem;
+}
+
+.docs-folder-panel__title {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.docs-folder-panel__title > div {
+  min-width: 0;
+}
+
+.docs-folder-panel__title svg,
+.docs-folder-panel__collapsed-trigger svg {
+  width: 0.95rem;
+  height: 0.95rem;
+  flex: none;
+  color: var(--docs-accent);
+}
+
+.docs-folder-panel__title p,
+.docs-folder-panel__title span {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-folder-panel__title p {
+  margin: 0;
+  font-size: 0.82rem;
+  font-weight: 750;
+  line-height: 1.2;
+}
+
+.docs-folder-panel__title span {
+  color: var(--docs-muted);
+  font-size: 0.68rem;
+  font-weight: 650;
+}
+
+.docs-folder-panel__actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: auto;
+}
+
+.docs-workspace .docs-folder-panel__actions button {
+  display: grid;
+  width: 1.75rem;
+  height: 1.75rem;
+  min-height: 1.75rem;
+  flex: none;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 0.3rem;
+  background: transparent;
+  color: var(--docs-muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+.docs-workspace .docs-folder-panel__actions button:hover,
+.docs-workspace .docs-folder-panel__actions button:focus-visible {
+  border-color: var(--docs-border);
+  background: color-mix(in srgb, var(--docs-subtle) 72%, transparent);
+  color: var(--foreground, #111);
+  outline: 0;
+}
+
+.docs-folder-panel__actions svg {
+  width: 0.82rem;
+  height: 0.82rem;
+}
+
+.docs-folder-panel__body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 0;
+  flex-direction: column;
+  border-left: 1px solid var(--docs-border);
+  border-right: 1px solid var(--docs-border);
+}
+
+.docs-folder-panel__list {
+  min-height: 0;
+  flex: 1 1 0;
+}
+
+.docs-folder-panel__list-content {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.5rem 0.85rem 0.5rem 0.5rem;
+}
+
+.docs-folder-panel__note-group {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.docs-workspace button.docs-folder-panel__note-row {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.25rem;
+  border: 1px solid transparent;
+  border-radius: 0.4rem;
+  background: transparent;
+  color: var(--foreground, #111);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 750;
+  line-height: 1.25;
+  padding-block: 0;
+  padding-right: 0.25rem;
+  text-align: left;
+}
+
+.docs-workspace button.docs-folder-panel__note-row:hover,
+.docs-workspace button.docs-folder-panel__note-row:focus-visible,
+.docs-workspace button.docs-folder-panel__child:hover,
+.docs-workspace button.docs-folder-panel__child:focus-visible {
+  border-color: var(--docs-border);
+  background: var(--docs-surface);
+  color: var(--foreground, #111);
+  outline: 0;
+}
+
+.docs-folder-panel__tree-chevron {
+  width: 0.9rem;
+  height: 0.9rem;
+  flex: none;
+  color: var(--docs-muted);
+  transition: rotate 140ms ease;
+}
+
+.docs-folder-panel__tree-chevron.expanded {
+  rotate: 90deg;
+}
+
+.docs-folder-panel__note-row span {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-folder-panel__children {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.docs-workspace button.docs-folder-panel__child {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 1.85rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid transparent;
+  border-radius: 0.4rem;
+  background: transparent;
+  color: var(--docs-muted);
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 650;
+  gap: 0.35rem;
+  padding-block: 0;
+  padding-right: 0.45rem;
+  text-align: left;
+}
+
+.docs-workspace button.docs-folder-panel__child.active {
+  border-color: var(--docs-border);
+  background: var(--docs-surface);
+  color: var(--foreground, #111);
+  outline: 0;
+}
+
+.docs-folder-panel__child > span:first-of-type {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-folder-panel__indent-guide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--docs-border) 80%, transparent);
+}
+
+.docs-folder-panel__child-count {
+  display: inline-flex;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--docs-accent) 12%, transparent);
+  color: var(--docs-muted);
+  font-size: 0.62rem;
+  font-weight: 750;
+  padding: 0 0.3rem;
+}
+
+.docs-workspace
+  button.docs-folder-panel__child.active
+  .docs-folder-panel__child-count {
+  color: var(--docs-accent);
+}
+
+.docs-folder-panel__empty {
+  margin: 0;
+  color: var(--docs-muted);
+  font-size: 0.75rem;
+  padding: 0.4rem 0.25rem;
+}
+
+.docs-folder-panel__tags {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin-top: auto;
+  border-top: 1px solid var(--docs-border);
+  background: color-mix(in srgb, var(--docs-subtle) 28%, var(--docs-surface));
+  padding: 0.45rem 0.5rem 0.55rem;
+}
+
+.docs-workspace button.docs-folder-panel__tag-chip {
+  display: inline-flex;
+  max-width: 100%;
+  min-height: 1.35rem;
+  align-items: center;
+  border: 1px solid color-mix(in srgb, var(--docs-border) 88%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--docs-surface) 88%, transparent);
+  color: var(--docs-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.62rem;
+  font-weight: 700;
+  line-height: 1.1;
+  padding: 0.15rem 0.45rem;
+  text-align: left;
+}
+
+.docs-workspace button.docs-folder-panel__tag-chip span,
+.docs-workspace button.docs-folder-panel__tag-chip {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-workspace button.docs-folder-panel__tag-chip:hover,
+.docs-workspace button.docs-folder-panel__tag-chip:focus-visible {
+  border-color: color-mix(in srgb, var(--docs-accent) 28%, var(--docs-border));
+  background: color-mix(in srgb, var(--docs-accent) 10%, var(--docs-surface));
+  color: var(--docs-accent);
+  outline: 0;
+}
+
+.docs-workspace button.docs-folder-panel__tag-chip.active,
+.docs-workspace button.docs-folder-panel__tag-chip[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--docs-accent) 34%, var(--docs-border));
+  background: color-mix(in srgb, var(--docs-accent) 14%, var(--docs-surface));
+  color: var(--docs-accent);
+}

package/dist/docs/DocsFolderPanel.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import "./DocsFolderPanel.css";
+
+  import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+  import FileTextIcon from "@lucide/svelte/icons/file-text";
+  import FolderIcon from "@lucide/svelte/icons/folder";
+  import XIcon from "@lucide/svelte/icons/x";
+  import DocsFolderDirectoryList from "./DocsFolderDirectoryList.svelte";
+  import { getActiveFolderNote, getFolderNotes } from "./docs-folder-directory";
+  import type { DocsNotePanel, DocsWorkspace, DocsWorkspaceIndex } from '../model';
+
+  let {
+    workspace = null,
+    activeTag = null,
+    activeNoteId = null,
+    activePanel = "note",
+    collapsed = false,
+    onSelectNote = () => {},
+    onSelectPanel = () => {},
+    onSelectTag = () => {},
+    onClose = () => {},
+    onCollapsedChange = () => {},
+  }: {
+    workspace?: DocsWorkspace | DocsWorkspaceIndex | null;
+    activeTag?: string | null;
+    activeNoteId?: string | null;
+    activePanel?: DocsNotePanel;
+    collapsed?: boolean;
+    onSelectNote?: (noteId: string) => void;
+    onSelectPanel?: (panel: DocsNotePanel) => void;
+    onSelectTag?: (tag: string) => void;
+    onClose?: () => void;
+    onCollapsedChange?: (collapsed: boolean) => void;
+  } = $props();
+
+  const folderNotes = $derived(getFolderNotes(workspace, activeTag));
+  const activeFolderNote = $derived(getActiveFolderNote(folderNotes, activeNoteId));
+  const collapsedLabel = $derived(activeFolderNote?.title ?? `#${activeTag}`);
+  const collapsedTitle = $derived(
+    activeFolderNote
+      ? `${activeFolderNote.title} in #${activeTag}`
+      : `#${activeTag}`,
+  );
+</script>
+
+{#if activeTag}
+  <aside class:docs-folder-panel--collapsed={collapsed} class="docs-folder-panel">
+    {#if collapsed}
+      <button
+        type="button"
+        class="docs-folder-panel__collapsed-trigger"
+        aria-label={`Expand #${activeTag} folder, selected ${collapsedLabel}`}
+        title={collapsedTitle}
+        onclick={() => onCollapsedChange(false)}
+      >
+        {#if activeFolderNote}
+          <FileTextIcon />
+        {:else}
+          <FolderIcon />
+        {/if}
+        <span>{collapsedLabel}</span>
+      </button>
+    {:else}
+      <header class="docs-folder-panel__header">
+        <div class="docs-folder-panel__title">
+          <FolderIcon />
+          <div>
+            <p>#{activeTag}</p>
+            <span>{folderNotes.length} {folderNotes.length === 1 ? "note" : "notes"}</span>
+          </div>
+        </div>
+        <div class="docs-folder-panel__actions">
+          <button
+            type="button"
+            aria-label={`Collapse #${activeTag} folder`}
+            title="Collapse folder panel"
+            onclick={() => onCollapsedChange(true)}
+          >
+            <ChevronLeftIcon />
+          </button>
+          <button
+            type="button"
+            aria-label={`Close #${activeTag} folder`}
+            title="Close folder panel"
+            onclick={onClose}
+          >
+            <XIcon />
+          </button>
+        </div>
+      </header>
+      <DocsFolderDirectoryList
+        {workspace}
+        {activeTag}
+        {activeNoteId}
+        {activePanel}
+        {onSelectNote}
+        {onSelectPanel}
+        {onSelectTag}
+      />
+    {/if}
+  </aside>
+{/if}

package/dist/docs/DocsFolderPanel.svelte.d.ts

@@ -0,0 +1,17 @@
+import "./DocsFolderPanel.css";
+import type { DocsNotePanel, DocsWorkspace, DocsWorkspaceIndex } from '../model';
+type $$ComponentProps = {
+    workspace?: DocsWorkspace | DocsWorkspaceIndex | null;
+    activeTag?: string | null;
+    activeNoteId?: string | null;
+    activePanel?: DocsNotePanel;
+    collapsed?: boolean;
+    onSelectNote?: (noteId: string) => void;
+    onSelectPanel?: (panel: DocsNotePanel) => void;
+    onSelectTag?: (tag: string) => void;
+    onClose?: () => void;
+    onCollapsedChange?: (collapsed: boolean) => void;
+};
+declare const DocsFolderPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsFolderPanel = ReturnType<typeof DocsFolderPanel>;
+export default DocsFolderPanel;