Skip to content

feat: add ft web browser dashboard#155

Open
mrkpatchaa wants to merge 9 commits into
afar1:mainfrom
mrkpatchaa:main
Open

feat: add ft web browser dashboard#155
mrkpatchaa wants to merge 9 commits into
afar1:mainfrom
mrkpatchaa:main

Conversation

@mrkpatchaa
Copy link
Copy Markdown

Add a browser-based bookmark observatory accessible via ft web. Uses Node.js built-in HTTP — no new npm dependencies.

  • src/web.ts: HTTP server with REST API (/api/overview, /api/bookmarks, /api/count, /api/bookmarks/:id) and an inline SPA (Tailwind + Chart.js + Alpine.js via CDN). Binds to 127.0.0.1 only. Exports createWebServer() for testing.
  • src/bookmarks-viz.ts: export buildVizData() and VizData interface so the web server can reuse the terminal viz aggregation logic.
  • src/cli.ts: register ft web [--port <n>] [--no-open] command.
  • tests/web.test.ts: 18 integration tests covering all routes, filters, pagination, and error paths.
  • tests/bookmarks-viz.test.ts: add buildVizData() unit test.
  • README.md: document ft web in quick start and commands table.
Screenshot 2026-05-11 at 13 59 56 Screenshot 2026-05-11 at 14 00 11

Add a browser-based bookmark observatory accessible via `ft web`.
Uses Node.js built-in HTTP — no new npm dependencies.

- src/web.ts: HTTP server with REST API (/api/overview,
  /api/bookmarks, /api/count, /api/bookmarks/:id) and an
  inline SPA (Tailwind + Chart.js + Alpine.js via CDN).
  Binds to 127.0.0.1 only. Exports createWebServer() for testing.
- src/bookmarks-viz.ts: export buildVizData() and VizData interface
  so the web server can reuse the terminal viz aggregation logic.
- src/cli.ts: register `ft web [--port <n>] [--no-open]` command.
- tests/web.test.ts: 18 integration tests covering all routes,
  filters, pagination, and error paths.
- tests/bookmarks-viz.test.ts: add buildVizData() unit test.
- README.md: document ft web in quick start and commands table.
Add /api/suggestions?field=author|category|domain&q=prefix endpoint
backed by getFilterSuggestions() in bookmarks-db.ts (prefix-match,
ordered by frequency). Wire Alpine.js custom dropdowns to each filter
input so suggestions appear as the user types (debounced 300ms) and
disappear on blur. Selecting a suggestion fills the input and triggers
a search.

Tests: 30/30 pass (11 new)
Author, category, and domain filters are now button-triggered dropdowns
with a search input inside the panel and a scrollable option list. Key
changes:

- Click the trigger button to open; click outside to close
- Search input inside panel filters list via /api/suggestions in real-time
- Active selection highlighted; 'Clear selection' row shown when set
- toggleDropdown() closes sibling dropdowns, fetches initial list,
  and auto-focuses the search input
- fetchSuggestions() always loads (empty prefix = top-N by freq)
- Tests renamed and assertions updated for the dropdown pattern
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant