# `PgFlowDashboard.Hooks`
[🔗](https://github.com/agoodway/pgflow/blob/v0.1.0/lib/pgflow_dashboard/hooks.ex#L1)
JavaScript hooks for PgFlow Dashboard.
PgFlow Dashboard uses LiveView hooks for interactive features like dark mode
toggling and keyboard shortcuts. These hooks must be registered with your
LiveSocket for the dashboard to function properly.
## Installation
### Option 1: Import from the package (recommended)
Add to your `assets/js/app.js`:
import { DarkMode, KeyboardShortcuts, ShortcutsModal } from "../../deps/pgflow/priv/static/pgflow_dashboard/hooks"
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { DarkMode, KeyboardShortcuts, ShortcutsModal, ...YourOtherHooks }
})
### Option 2: Copy the hooks
Copy the hook files from `deps/pgflow/priv/static/pgflow_dashboard/hooks/` to your
`assets/js/` directory and import them from there.
## Available Hooks
### DarkMode
Manages dark mode toggle with localStorage persistence. Attach to the dark
mode toggle button:
### KeyboardShortcuts
Handles global keyboard navigation shortcuts. Attach to the main dashboard
container with a `data-base-path` attribute:
...
Shortcuts:
- `g o` - Go to Overview
- `g w` - Go to Workers
- `g f` - Go to Flows
- `g r` - Go to Runs
- `d` - Toggle dark mode
- `?` or `K` - Open shortcuts modal
- `Esc` - Close modal
### ShortcutsModal
Manages the keyboard shortcuts help modal. Attach to the modal container:
...
## Theme Initialization
For the best user experience, add this script to your root layout's ``
to prevent flash of unstyled content:
# `hooks_path`
```elixir
@spec hooks_path() :: String.t()
```
Returns the path to the hooks directory.
This can be used to copy hooks to your assets directory:
Mix.install([])
File.cp_r!(PgFlowDashboard.Hooks.hooks_path(), "assets/js/pgflow_hooks")
---
*Consult [api-reference.md](api-reference.md) for complete listing*