Function HelpDrawer

ui/src/appComponents/HelpDrawer.tsx:29–157

({
  onClose,
  onOpenAddRepo,
  onOpenChat,
  onOpenSettings,
}: HelpDrawerProps)

}

export default function HelpDrawer({
  onClose,
  onOpenAddRepo,
  onOpenChat,
  onOpenSettings,
}: HelpDrawerProps) {
  const panelRef = useRef<HTMLDivElement>(null);
  const { width: panelWidth, handleMouseDown } = useResizablePanel({
    storageKey: 'ot_help_drawer_width',
    defaultWidth: 380,
    minWidth: 320,
    maxWidth: 640,
    side: 'left',
    panelRef,
  });

  return (
    <div
      ref={panelRef}
      className="help-drawer"
      style={
        { '--help-drawer-width': `${panelWidth}px` } as React.CSSProperties
      }
    >
      <PanelResizeHandle side="left" onMouseDown={handleMouseDown} />
      <div className="panel-header">
        <h3>Getting Started</h3>
        <button className="close-btn" onClick={onClose}>
          &times;
        </button>
      </div>

      <div className="help-content">
        <section className="help-section">
          <h4>Graph Navigation</h4>
          <dl className="help-shortcuts">
            <dt>Pan</dt>
            <dd>Click &amp; drag on the canvas</dd>
            <dt>Zoom</dt>
            <dd>Scroll wheel or pinch</dd>
            <dt>Select node</dt>
            <dd>Click a node</dd>
            <dt>Deselect</dt>
            <dd>Click empty canvas</dd>
          </dl>
        </section>

        <section className="help-section">
          <h4>Search &amp; Filtering</h4>
          <dl className="help-shortcuts">
            <dt>Search</dt>
            <dd>Type a node name and press Enter</dd>
            <dt>Hops</dt>
            <dd>Control how many connections deep to traverse</dd>
            <dt>Show All</dt>
            <dd>Reset search to show the full graph</dd>
            <dt>Filters</dt>
            <dd>Toggle node types and communities in the side panels</dd>