Files
pad/web
xarmian 9dd4fa653e feat(board): lane-header + add button + kebab menu shell (TASK-1671) (#672)
* feat(board): lane-header + add button + kebab menu shell (TASK-1671, folds IDEA-1159)

Replace the hover-only .archive-col-btn in BoardView lane headers with
two always-visible, touch-sized affordances:
- `+` add-into-this-lane button → onCreateInColumn(colValue), which
  quick-creates an item with the lane's group field pre-filled (status
  or a custom board_group_by) and opens it.
- `⋯` kebab → a lane menu (the new home for column actions). Shell
  carries "Add item here" + "Archive all (N)" with an in-menu confirm;
  move/tag/priority/assign land in TASK-1672. One menu open at a time,
  dismissed on outside click (QuickActionsMenu pattern).

Both affordances are canEdit-gated. Touch targets bump to 32px ≤768px.

* fix(board): stopPropagation on lane-menu clicks per Codex review (round 1)

Clicking "Archive all" set confirmArchiveColumn, which re-rendered and
detached the clicked button before the event bubbled to the window
outside-click handler — closest() on the orphaned node returned null and
slammed the menu shut, so the confirm never showed. Stop propagation on
the kebab toggle and every in-menu click (the documented Svelte 5
same-click bubbling fix from console/+layout.svelte).
2026-05-30 21:22:22 -04:00
..
2026-03-26 01:52:36 +00:00
2026-03-26 01:52:36 +00:00
2026-03-26 01:52:36 +00:00
2026-03-26 01:52:36 +00:00
2026-03-26 01:52:36 +00:00
2026-03-26 01:52:36 +00:00

Pad Web UI

SvelteKit 2 + Svelte 5 frontend for Pad, compiled to static files and embedded into the Go binary.

Development

npm install
npm run dev          # Dev server at localhost:5173 (proxies API to localhost:7777)
npm run build        # Production build to build/
npm run check        # Type checking with svelte-check

When developing, run the Go backend separately with make dev from the project root.

Building for Production

Do not build in isolation. Always use make build from the project root — this builds the web frontend, then compiles the Go binary with the build output embedded via //go:embed.

Stack

  • Svelte 5 with runes ($state, $derived, $effect)
  • SvelteKit 2 with adapter-static (SPA mode)
  • Tiptap block editor with markdown round-trip
  • svelte-dnd-action for drag-and-drop in board/list views
  • SSE for real-time updates
  • TypeScript throughout

Structure

src/
  routes/                    SvelteKit pages
    +layout.svelte           App shell (sidebar + main)
    +page.svelte             Landing/redirect
    [workspace]/
      +page.svelte           Dashboard (collections, phases, activity)
      +layout.svelte         SSE connection per workspace
      [collection]/
        +page.svelte         Collection view (board/list)
      [collection]/[item]/
        +page.svelte         Item detail + editor
      conventions/            Purpose-built conventions page
      playbooks/              Purpose-built playbooks page
      settings/               Workspace settings
  lib/
    api/client.ts            HTTP API client
    components/
      layout/                Sidebar, navigation
      editor/                Tiptap editor, raw markdown editor
      fields/                FieldEditor, relation picker
      items/                 ItemCard, ItemDetail
      collections/           BoardView, ListView
      common/                StatusBadge, badges, modals
      search/                CommandPalette
      activity/              ActivityFeed
    stores/                  Svelte 5 reactive stores
      workspace.svelte.ts    Workspace state
      collections.svelte.ts  Collection + item state
      ui.svelte.ts           Sidebar, mobile state
    types/index.ts           TypeScript types and constants
  app.css                    Global styles and design tokens