@plannotator/ui 0.24.0 → 0.26.0

package/components/sidebar/FileBrowser.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from "react";
+import { Search, X } from "lucide-react";
 import type { VaultNode } from "../../types";
 import type { DirState } from "../../hooks/useFileBrowser";
 import { CountBadge } from "./CountBadge";
@@ -42,6 +43,40 @@ interface AggregateWorkspaceChange {
   files: number;
 }
 
+const FILE_EXTENSION_RE = /\.(mdx?|txt|html?)$/i;
+
+function normalizeFilterText(value: string): string {
+  return value.replace(/\\/g, "/").toLowerCase();
+}
+
+export function getFileTreeFilterTokens(query: string): string[] {
+  return normalizeFilterText(query)
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+}
+
+function nodeMatchesFilter(node: VaultNode, tokens: string[]): boolean {
+  if (tokens.length === 0) return true;
+  const displayName = node.name.replace(FILE_EXTENSION_RE, "");
+  const haystack = normalizeFilterText(`${node.name} ${displayName} ${node.path}`);
+  return tokens.every((token) => haystack.includes(token));
+}
+
+export function filterFileTree(nodes: VaultNode[], tokens: string[]): VaultNode[] {
+  if (tokens.length === 0) return nodes;
+
+  return nodes.flatMap((node) => {
+    if (node.type === "file") return nodeMatchesFilter(node, tokens) ? [node] : [];
+
+    if (nodeMatchesFilter(node, tokens)) return [node];
+
+    const children = filterFileTree(node.children ?? [], tokens);
+    if (children.length === 0) return [];
+    return [{ ...node, children }];
+  });
+}
+
 export function normalizePathForLookup(path: string): string {
   return normalizeBrowserPath(path);
 }
@@ -207,21 +242,26 @@ const TreeNode: React.FC<{
   highlightedFiles?: Set<string>;
   editStatuses?: Map<string, FileEditStatus>;
   workspaceStatus?: WorkspaceStatusPayload;
-}> = ({ node, depth, dirPath, expandedFolders, onToggleFolder, onSelectFile, activeFile, annotationCounts, highlightedFiles, editStatuses, workspaceStatus }) => {
+  forceExpandFolders?: boolean;
+}> = ({ node, depth, dirPath, expandedFolders, onToggleFolder, onSelectFile, activeFile, annotationCounts, highlightedFiles, editStatuses, workspaceStatus, forceExpandFolders = false }) => {
   const folderKey = `${dirPath}:${node.path}`;
   const absolutePath = `${dirPath}/${node.path}`;
-  const isExpanded = expandedFolders.has(folderKey);
+  const isExpanded = forceExpandFolders || expandedFolders.has(folderKey);
   const isActive = node.type === "file" && absolutePath === activeFile;
   const paddingLeft = 8 + depth * 14;
 
   if (node.type === "folder") {
     const aggregateCount = annotationCounts ? getAggregateCount(node, dirPath, annotationCounts, workspaceStatus) : 0;
     const aggregateChange = getAggregateWorkspaceChange(node, dirPath, workspaceStatus);
+    const folderButtonClassName = forceExpandFolders
+      ? "file-tree-folder w-full flex items-center gap-1.5 py-1 px-2 text-[11px] text-muted-foreground transition-colors rounded-sm cursor-default disabled:opacity-100"
+      : "file-tree-folder w-full flex items-center gap-1.5 py-1 px-2 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors rounded-sm";
     return (
       <>
         <button
+          disabled={forceExpandFolders}
           onClick={() => onToggleFolder(folderKey)}
-          className="file-tree-folder w-full flex items-center gap-1.5 py-1 px-2 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors rounded-sm"
+          className={folderButtonClassName}
           style={{ paddingLeft }}
         >
           <svg
@@ -261,6 +301,7 @@ const TreeNode: React.FC<{
             highlightedFiles={highlightedFiles}
             editStatuses={editStatuses}
             workspaceStatus={workspaceStatus}
+            forceExpandFolders={forceExpandFolders}
           />
         ))}
       </>
@@ -348,7 +389,8 @@ const DirSection: React.FC<{
   annotationCounts?: Map<string, number>;
   highlightedFiles?: Set<string>;
   editStatuses?: Map<string, FileEditStatus>;
-}> = ({ dir, expandedFolders, onToggleFolder, onSelectFile, activeFile, onRetry, annotationCounts, highlightedFiles, editStatuses }) => {
+  forceExpandFolders?: boolean;
+}> = ({ dir, expandedFolders, onToggleFolder, onSelectFile, activeFile, onRetry, annotationCounts, highlightedFiles, editStatuses, forceExpandFolders = false }) => {
   const workspaceStatus = React.useMemo(() => normalizeWorkspaceStatus(dir.workspaceStatus), [dir.workspaceStatus]);
 
   if (dir.isLoading) {
@@ -397,6 +439,7 @@ const DirSection: React.FC<{
           highlightedFiles={highlightedFiles}
           editStatuses={editStatuses}
           workspaceStatus={workspaceStatus}
+          forceExpandFolders={forceExpandFolders}
         />
       ))}
     </div>
@@ -417,6 +460,30 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
   highlightedFiles,
   editStatuses,
 }) => {
+  const [isFilterOpen, setIsFilterOpen] = React.useState(false);
+  const [filterQuery, setFilterQuery] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const deferredFilterQuery = React.useDeferredValue(filterQuery);
+  const filterTokens = React.useMemo(() => getFileTreeFilterTokens(deferredFilterQuery), [deferredFilterQuery]);
+  const isFiltering = filterTokens.length > 0;
+  const showFilterInput = isFilterOpen || filterQuery.trim().length > 0;
+  const visibleDirs = React.useMemo(() => {
+    if (!isFiltering) return dirs;
+    return dirs
+      .map((dir) => ({ ...dir, tree: filterFileTree(dir.tree, filterTokens) }))
+      .filter((dir) => dir.isLoading || dir.error || dir.tree.length > 0);
+  }, [dirs, filterTokens, isFiltering]);
+  const handleFilterBlur = React.useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+    if (filterQuery.trim()) return;
+    if (event.currentTarget.contains(event.relatedTarget)) return;
+    setIsFilterOpen(false);
+  }, [filterQuery]);
+
+  React.useEffect(() => {
+    if (!showFilterInput) return;
+    inputRef.current?.focus();
+  }, [showFilterInput]);
+
   if (dirs.length === 0) {
     return (
       <div className="p-3 text-[11px] text-muted-foreground">
@@ -454,8 +521,66 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
           {workspaceTotals.deletions > 0 && <span className={`deletions ${workspaceTotals.additions > 0 ? "" : "ml-auto"}`}>-{workspaceTotals.deletions}</span>}
         </div>
       )}
-      {dirs.map((dir) => {
-        const isCollapsed = collapsedDirs.has(dir.path);
+      <div className="border-b border-border/20 px-2 py-0.5">
+        {showFilterInput ? (
+          <div
+            onBlur={handleFilterBlur}
+            className="flex h-6 items-center gap-1.5 rounded-sm bg-muted/25 px-1.5 text-muted-foreground focus-within:bg-muted/40"
+          >
+            <Search size={12} className="shrink-0 text-muted-foreground/55" aria-hidden="true" />
+            <input
+              ref={inputRef}
+              type="search"
+              value={filterQuery}
+              onChange={(event) => setFilterQuery(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key !== "Escape") return;
+                if (filterQuery) setFilterQuery("");
+                else setIsFilterOpen(false);
+              }}
+              placeholder="Filter"
+              aria-label="Filter files"
+              autoComplete="off"
+              spellCheck={false}
+              data-lpignore="true"
+              data-1p-ignore
+              className="file-browser-filter-input h-full min-w-0 flex-1 bg-transparent p-0 text-[16px] leading-4 text-foreground outline-none placeholder:text-muted-foreground/45 sm:text-[11px]"
+            />
+            {filterQuery && (
+              <button
+                type="button"
+                onClick={() => {
+                  setFilterQuery("");
+                  inputRef.current?.focus();
+                }}
+                className="flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground/55 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:bg-muted"
+                aria-label="Clear file filter"
+                title="Clear file filter"
+              >
+                <X size={12} aria-hidden="true" />
+              </button>
+            )}
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setIsFilterOpen(true)}
+            className="flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[10px] text-muted-foreground hover:bg-muted/40 hover:text-foreground focus-visible:outline-none focus-visible:bg-muted/50 focus-visible:text-foreground"
+            aria-label="Filter files"
+            title="Filter files"
+          >
+            <Search size={12} className="shrink-0 text-muted-foreground/55" aria-hidden="true" />
+            <span className="truncate">Filter</span>
+          </button>
+        )}
+      </div>
+      {isFiltering && visibleDirs.length === 0 && (
+        <div className="px-3 py-8 text-center text-[11px] text-muted-foreground">
+          No files match "{deferredFilterQuery.trim()}"
+        </div>
+      )}
+      {visibleDirs.map((dir) => {
+        const isCollapsed = !isFiltering && collapsedDirs.has(dir.path);
         return (
           <div key={dir.path}>
             <button
@@ -488,6 +613,7 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
                 annotationCounts={annotationCounts}
                 highlightedFiles={highlightedFiles}
                 editStatuses={editStatuses}
+                forceExpandFolders={isFiltering}
               />
             )}
           </div>

package/hooks/useResizablePanel.ts

@@ -23,6 +23,16 @@ interface UseResizablePanelOptions {
    * (still rAF-coalesced).
    */
   apply?: (width: number) => void;
+  /**
+   * Fires on pointer-up when the pointer never moved beyond `clickThreshold` —
+   * i.e. a genuine click on the handle, not a drag. The hook owns the pointer
+   * state machine, so this is the only reliable way to tell a click from a
+   * drag-start. Lets a host make the whole handle a click target (e.g. click
+   * anywhere on the handle to collapse the panel). Not fired on a snap-close.
+   */
+  onClick?: () => void;
+  /** Max pointer travel (px) still counted as a click for `onClick`. Default 4. */
+  clickThreshold?: number;
 }
 
 export interface ResizeHandleProps {
@@ -43,6 +53,8 @@ export function useResizablePanel({
   onSnapClose,
   snapCloseRatio = 0.6,
   apply,
+  onClick,
+  clickThreshold = 4,
 }: UseResizablePanelOptions) {
   const [width, setWidth] = useState(() => {
     const saved = storage.getItem(storageKey);
@@ -61,6 +73,9 @@ export function useResizablePanel({
   const startWidthRef = useRef(0);
   const draggingRef = useRef(false);
   const snappedRef = useRef(false);
+  // Latches true once the pointer travels past clickThreshold — distinguishes a
+  // click from a drag. Reset on each pointerdown.
+  const movedRef = useRef(false);
   const latestXRef = useRef(0);
   const rafRef = useRef<number | null>(null);
 
@@ -69,6 +84,8 @@ export function useResizablePanel({
   applyRef.current = apply;
   const onSnapCloseRef = useRef(onSnapClose);
   onSnapCloseRef.current = onSnapClose;
+  const onClickRef = useRef(onClick);
+  onClickRef.current = onClick;
 
   // rAF tick: compute the width from the most recent pointer position and apply
   // it. At most one DOM/state write per frame regardless of pointer-event rate.
@@ -110,6 +127,7 @@ export function useResizablePanel({
       startWidthRef.current = widthRef.current;
       latestXRef.current = pos;
       snappedRef.current = false;
+      movedRef.current = false;
       draggingRef.current = true;
       setIsDragging(true);
 
@@ -120,6 +138,8 @@ export function useResizablePanel({
       const onMove = (ev: PointerEvent) => {
         if (!draggingRef.current) return;
         latestXRef.current = axis === 'y' ? ev.clientY : ev.clientX;
+        if (Math.abs(latestXRef.current - startXRef.current) > clickThreshold)
+          movedRef.current = true;
         if (rafRef.current == null) rafRef.current = requestAnimationFrame(flush);
       };
       const cleanup = () => {
@@ -127,7 +147,11 @@ export function useResizablePanel({
         window.removeEventListener('pointerup', onUp);
         window.removeEventListener('pointercancel', onUp);
       };
-      function onUp() {
+      function onUp(e: PointerEvent) {
+        // pointercancel = the browser aborted the gesture (palm rejection, a
+        // system gesture, focus loss). It is NOT a completed click — only clean
+        // up drag state, never treat it as a click-to-collapse.
+        const cancelled = e?.type === 'pointercancel';
         const wasSnapped = snappedRef.current;
         draggingRef.current = false;
         snappedRef.current = false;
@@ -137,9 +161,16 @@ export function useResizablePanel({
         }
         setIsDragging(false);
         if (!wasSnapped) {
-          // Commit the live width to React state + persist.
-          setWidth(widthRef.current);
-          storage.setItem(storageKey, String(widthRef.current));
+          if (onClickRef.current && !movedRef.current && !cancelled) {
+            // A pointerdown+up that never crossed the threshold is a click, not
+            // a resize — fire onClick and leave the width untouched. Only when a
+            // host opts in via onClick; otherwise commit exactly as before.
+            onClickRef.current();
+          } else {
+            // Commit the live width to React state + persist.
+            setWidth(widthRef.current);
+            storage.setItem(storageKey, String(widthRef.current));
+          }
         }
         cleanup();
       }
@@ -148,7 +179,7 @@ export function useResizablePanel({
       window.addEventListener('pointerup', onUp);
       window.addEventListener('pointercancel', onUp);
     },
-    [flush, storageKey, axis],
+    [flush, storageKey, axis, clickThreshold],
   );
 
   const resetWidth = useCallback(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/ui",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "type": "module",
   "exports": {
     "./components/*": "./components/*.tsx",