Implemented useClickOutside hook

[opencode-agent]

All tests pass and linting is clean. Let me provide a summary of the implemented feature:

Summary

I've implemented a new useClickOutside hook for the NodeTool web application. This is a useful, reusable React hook for detecting clicks outside of DOM elements.

Files Created/Modified:

1. web/src/hooks/useClickOutside.ts - New hook with:

   • useClickOutside() - Detects clicks outside a single element
   • useClickOutsideMultiple() - Detects clicks outside multiple elements
   • Supports both separate arguments and object pattern API
   • Handles both mouse and touch events
   • Configurable enabled state

2. web/src/hooks/__tests__/useClickOutside.test.ts - Comprehensive test suite with 16 tests covering:

   • Basic functionality (inside/outside detection)
   • Enabled/disabled states
   • Event types (mouse, touch)
   • DOM element handling
   • Cleanup on unmount
   • Multiple calls

3. web/src/hooks/AGENTS.md - Updated documentation to include the new hook

Usage Example:

// Using object pattern (recommended)
useClickOutside({
  ref: myElementRef,
  onClickOutside: (event) => {
    closeDropdown();
  },
});

// Using separate arguments
useClickOutside(myElementRef, {
  onClickOutside: (event) => {
    closeModal();
  },
});

// Multiple elements
useClickOutsideMultiple({
  refs: [ref1, ref2],
  onClickOutside: () => {
    closeAll();
  },
});

This hook is useful for modals, dropdowns, tooltips, context menus, and any UI component that should close when clicking outside.

Triggered by scheduled workflow

opencode session  |  github run

[cloudflare-workers-and-pages]

Deploying nodetool-staging with    Cloudflare Pages

Latest commit:	d2d17ef
Status:	✅  Deploy successful!
Preview URL:	https://d5a9abdf.nodetool-staging.pages.dev
Branch Preview URL:	https://opencode-schedule-5be2b3-202.nodetool-staging.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying nodetool with    Cloudflare Pages

Latest commit:	d2d17ef
Status:	✅  Deploy successful!
Preview URL:	https://352f62ab.nodetool.pages.dev
Branch Preview URL:	https://opencode-schedule-5be2b3-202.nodetool.pages.dev

View logs

[georgi]

/oc use the useClickOutside in a couple of places where it can replace code

[opencode-agent]

I've refactored Select.tsx to use the new useClickOutside hook. Here's a summary of the changes:

File: web/src/components/inputs/Select.tsx

Replaced manual click-outside implementation (lines 122-137) with the new hook:

Before:

useEffect(() => {
  const handleClickOutside = (event: MouseEvent) => {
    if (
      selectRef.current &&
      !selectRef.current.contains(event.target as Node) &&
      activeSelect === id
    ) {
      close();
    }
  };

  document.addEventListener("mousedown", handleClickOutside);
  return () => {
    document.removeEventListener("mousedown", handleClickOutside);
  };
}, [close, activeSelect, id]);

After:

useClickOutside({
  ref: selectRef,
  onClickOutside: () => {
    if (activeSelect === id) {
      close();
    }
  },
  enabled: activeSelect === id
});

Benefits:

• Cleaner, more declarative code
• Supports both mouse and touch events (original only supported mousedown)
• Proper cleanup built-in
• Uses the enabled option for conditional activation

Other files with click-outside implementations (ContextMenuProvider.tsx, useClickOutsideDeselect.ts, WorkflowList.tsx) have more complex logic (custom class checking, multiple conditions) that doesn't map directly to the hook's API, so they would require more extensive refactoring to benefit from it.

opencode session  |  github run