@jjlmoya/utils-tabletop 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.5.0",
+    "version": "1.6.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -17,7 +17,7 @@
         "access": "public"
     },
     "scripts": {
-        "dev": "astro dev",
+        "dev": "astro dev --host",
         "start": "astro dev",
         "build": "astro build",
         "preview": "astro preview",
@@ -42,9 +42,11 @@
         "@iconify-json/mdi": "^1.2.3",
         "@jjlmoya/prompagate": "^1.1.0",
         "@jjlmoya/utils-shared": "1.2.0",
+        "@panzoom/panzoom": "^4.6.2",
         "astro": "^6.1.2",
         "astro-icon": "^1.1.0",
-        "html2canvas": "^1.4.1"
+        "html2canvas": "^1.4.1",
+        "interactjs": "^1.10.27"
     },
     "devDependencies": {
         "@astrojs/check": "^0.9.8",

package/src/entries.ts

@@ -10,6 +10,8 @@ export { initiativeTracker } from './tool/rpg-initiative-tracker/entry';
 export type { InitiativeTrackerUI, InitiativeTrackerLocaleContent } from './tool/rpg-initiative-tracker/entry';
 export { fantasyRunesTranslator } from './tool/fantasy-runes-translator/entry';
 export type { FantasyRunesTranslatorUI, FantasyRunesTranslatorLocaleContent } from './tool/fantasy-runes-translator/entry';
+export { investigationBoard } from './tool/investigation-board/entry';
+export type { InvestigationBoardUI, InvestigationBoardLocaleContent } from './tool/investigation-board/entry';
 export { tabletopCategory } from './category';
 
 import { diceRollerSimulator } from './tool/dice-roller-simulator/entry';
@@ -19,5 +21,7 @@ import { scoreTracker } from './tool/score-tracker/entry';
 import { initiativeTracker } from './tool/rpg-initiative-tracker/entry';
 import { fantasyRunesTranslator } from './tool/fantasy-runes-translator/entry';
 import { decisionWheel } from './tool/decision-wheel/entry';
+import { investigationBoard } from './tool/investigation-board/entry';
+
+export const ALL_ENTRIES = [diceRollerSimulator, boardGameTimer, firstPlayerSelector, scoreTracker, initiativeTracker, fantasyRunesTranslator, decisionWheel, investigationBoard];
 
-export const ALL_ENTRIES = [diceRollerSimulator, boardGameTimer, firstPlayerSelector, scoreTracker, initiativeTracker, fantasyRunesTranslator, decisionWheel];

package/src/index.ts

@@ -4,6 +4,8 @@ export const tabletopCategorySEO = () => import('./category/TabletopCategorySEO.
 export { diceRollerSimulator, DICE_ROLLER_SIMULATOR_TOOL } from './tool/dice-roller-simulator';
 export { boardGameTimer, BOARD_GAME_TIMER_TOOL } from './tool/board-game-timer';
 export { fantasyRunesTranslator, FANTASY_RUNES_TRANSLATOR_TOOL } from './tool/fantasy-runes-translator';
+export { investigationBoard, INVESTIGATION_BOARD_TOOL } from './tool/investigation-board';
+
 
 export type {
   KnownLocale,

package/src/tests/locale_completeness.test.ts

@@ -22,8 +22,9 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(7);
+    expect(ALL_TOOLS.length).toBe(8);
   });
 
+
 });
 

package/src/tests/tool_validation.test.ts

@@ -5,9 +5,10 @@ import { tabletopCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(7);
+      expect(ALL_TOOLS.length).toBe(8);
     });
 
+
     it('tabletopCategory should be defined', () => {
       expect(tabletopCategory).toBeDefined();
       expect(tabletopCategory.i18n).toBeDefined();

package/src/tool/investigation-board/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { investigationBoard } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = investigationBoard.i18n[locale] || investigationBoard.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/investigation-board/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Conspiracy Board Corkboard Visualizations',
+    url: 'https://en.wikipedia.org/wiki/Conspiracy_board',
+  },
+  {
+    name: 'Concept Mapping in Detective Narratives',
+    url: 'https://en.wikipedia.org/wiki/Concept_map',
+  },
+];

package/src/tool/investigation-board/boardContextMenu.ts

@@ -0,0 +1,64 @@
+import { ctxMenu, viewportEl, state } from './dom';
+import { panzoomInstance } from './panzoom';
+
+export interface ContextMenuOptions {
+  x: number;
+  y: number;
+  nodeId: string | null;
+  canvasX: number;
+  canvasY: number;
+}
+
+export function showContextMenu(opts: ContextMenuOptions): void {
+  state.longPressTargetNodeId = opts.nodeId;
+  state.longPressCanvasX = opts.canvasX;
+  state.longPressCanvasY = opts.canvasY;
+
+  ctxMenu.style.left = `${opts.x}px`;
+  ctxMenu.style.top = `${opts.y}px`;
+  ctxMenu.classList.add('active');
+
+  const displayVal = opts.nodeId ? 'flex' : 'none';
+  ctxMenu.querySelectorAll('.card-only').forEach((el) => {
+    (el as HTMLElement).style.display = displayVal;
+  });
+}
+
+export function hideContextMenu(): void {
+  ctxMenu.classList.remove('active');
+  state.longPressTargetNodeId = null;
+}
+
+export function startLongPress(e: PointerEvent, nodeId: string | null): void {
+  hideContextMenu();
+  const clientX = e.clientX;
+  const clientY = e.clientY;
+  state.startX = clientX;
+  state.startY = clientY;
+
+  const viewRect = viewportEl.getBoundingClientRect();
+  const localX = clientX - viewRect.left;
+  const localY = clientY - viewRect.top;
+  const pan = panzoomInstance.getPan();
+  const scale = panzoomInstance.getScale();
+  const canvasX = (localX - pan.x) / scale;
+  const canvasY = (localY - pan.y) / scale;
+
+  state.longPressTimer = window.setTimeout(() => {
+    showContextMenu({ x: clientX, y: clientY, nodeId, canvasX, canvasY });
+  }, 600);
+}
+
+export function cancelLongPress(): void {
+  if (state.longPressTimer) {
+    clearTimeout(state.longPressTimer);
+    state.longPressTimer = null;
+  }
+}
+
+export function checkLongPressMove(clientX: number, clientY: number): void {
+  const dist = Math.sqrt((clientX - state.startX) ** 2 + (clientY - state.startY) ** 2);
+  if (dist > 8) {
+    cancelLongPress();
+  }
+}

package/src/tool/investigation-board/client.ts

@@ -0,0 +1,223 @@
+import {
+  state,
+  mainCard,
+  viewportEl,
+  areaEl,
+  svgEl,
+  searchInput,
+  categoryBtns,
+  addCardBtn,
+  clearBoardBtn,
+  boardSelect,
+  saveBoardAsBtn,
+  newBoardBtn,
+  connBanner,
+  zoomInBtn,
+  zoomOutBtn,
+  zoomResetBtn,
+  fullscreenToggleBtn,
+  ctxMenu,
+  ctxAddCard,
+  ctxEditCard,
+  ctxLinkCard,
+  ctxDeleteCard,
+  CURRENT_ID_KEY,
+} from './dom';
+import { panzoomInstance } from './panzoom';
+import {
+  startLongPress,
+  cancelLongPress,
+  checkLongPressMove,
+  hideContextMenu,
+} from './boardContextMenu';
+import { adjustBoardSize } from './layout';
+import {
+  saveState,
+  saveBoardsList,
+  updateBoardSelect,
+  loadBoardState,
+  loadBoardsList,
+} from './stateManager';
+import { renderBoard } from './renderer';
+import { openDrawer } from './drawer';
+import { initializeDrag } from './interactDrag';
+import { createNode, deleteNode } from './logic';
+
+zoomInBtn.addEventListener('click', () => panzoomInstance.zoomIn());
+zoomOutBtn.addEventListener('click', () => panzoomInstance.zoomOut());
+zoomResetBtn.addEventListener('click', () => panzoomInstance.reset());
+
+fullscreenToggleBtn.addEventListener('click', () => {
+  mainCard.classList.toggle('immersive');
+  setTimeout(() => {
+    adjustBoardSize();
+  }, 100);
+});
+
+addCardBtn.addEventListener('click', () => {
+  const card = createNode({
+    name: 'New Card',
+    category: 'clue',
+    x: 100 + Math.random() * 100,
+    y: 100 + Math.random() * 100,
+    color: '#ef4444',
+  });
+  state.nodes.push(card);
+  saveState();
+  renderBoard();
+  openDrawer(card);
+});
+
+clearBoardBtn.addEventListener('click', () => {
+  if (confirm('Clear the entire board?')) {
+    state.nodes = [];
+    state.connections = [];
+    saveState();
+    renderBoard();
+  }
+});
+
+searchInput.addEventListener('input', () => {
+  state.currentSearchQuery = searchInput.value;
+  renderBoard();
+});
+
+categoryBtns.forEach((btn) => {
+  btn.addEventListener('click', () => {
+    categoryBtns.forEach((b) => b.classList.remove('active'));
+    btn.classList.add('active');
+    state.currentCategoryFilter = btn.getAttribute('data-category') || 'all';
+    renderBoard();
+  });
+});
+
+viewportEl.addEventListener('pointerdown', (e) => {
+  const target = e.target as HTMLElement;
+  if (
+    target.closest('.board-node') ||
+    target.closest('.zoom-controls') ||
+    target.closest('.control-panel') ||
+    target.closest('.card-drawer') ||
+    target.closest('.modal-overlay') ||
+    target.closest('.context-menu')
+  ) {
+    return;
+  }
+  if (state.quickLinkSourceId) {
+    state.quickLinkSourceId = null;
+    connBanner.classList.remove('active');
+  }
+  startLongPress(e, null);
+});
+
+viewportEl.addEventListener('pointermove', (e) => {
+  checkLongPressMove(e.clientX, e.clientY);
+});
+
+viewportEl.addEventListener('pointerup', () => {
+  cancelLongPress();
+});
+
+viewportEl.addEventListener('pointercancel', () => {
+  cancelLongPress();
+});
+
+viewportEl.addEventListener('click', (e) => {
+  if (e.target === viewportEl || e.target === areaEl || e.target === svgEl) {
+    state.highlightedNodeId = null;
+    renderBoard();
+  }
+});
+
+document.addEventListener('click', (e) => {
+  if (!ctxMenu.contains(e.target as Node)) {
+    hideContextMenu();
+  }
+});
+
+ctxAddCard.addEventListener('click', () => {
+  hideContextMenu();
+  const card = createNode({
+    name: 'New Card',
+    category: 'clue',
+    x: state.longPressCanvasX,
+    y: state.longPressCanvasY,
+    color: '#ef4444',
+  });
+  state.nodes.push(card);
+  saveState();
+  renderBoard();
+  openDrawer(card);
+});
+
+ctxEditCard.addEventListener('click', () => {
+  const nodeId = state.longPressTargetNodeId;
+  hideContextMenu();
+  if (nodeId) {
+    const node = state.nodes.find((n) => n.id === nodeId);
+    if (node) openDrawer(node);
+  }
+});
+
+ctxLinkCard.addEventListener('click', () => {
+  const nodeId = state.longPressTargetNodeId;
+  hideContextMenu();
+  if (nodeId) {
+    state.quickLinkSourceId = nodeId;
+    connBanner.classList.add('active');
+  }
+});
+
+ctxDeleteCard.addEventListener('click', () => {
+  const nodeId = state.longPressTargetNodeId;
+  hideContextMenu();
+  if (nodeId) {
+    if (confirm('Delete this card?')) {
+      const result = deleteNode(state.nodes, state.connections, nodeId);
+      state.nodes = result.nodes;
+      state.connections = result.connections;
+      saveState();
+      renderBoard();
+    }
+  }
+});
+
+boardSelect.addEventListener('change', () => {
+  loadBoardState(boardSelect.value);
+  renderBoard();
+});
+
+saveBoardAsBtn.addEventListener('click', () => {
+  const name = prompt('Enter a name for this board:');
+  if (!name || name.trim().length === 0) return;
+  const newId = 'board_' + Math.random().toString(36).substring(2, 9);
+  state.boardsList.push({ id: newId, name: name.trim() });
+  saveBoardsList();
+  state.currentBoardId = newId;
+  saveState();
+  updateBoardSelect();
+  loadBoardState(newId);
+  renderBoard();
+});
+
+newBoardBtn.addEventListener('click', () => {
+  const name = prompt('Enter a name for the new board:');
+  if (!name || name.trim().length === 0) return;
+  const newId = 'board_' + Math.random().toString(36).substring(2, 9);
+  state.boardsList.push({ id: newId, name: name.trim() });
+  saveBoardsList();
+  state.currentBoardId = newId;
+  state.nodes = [];
+  state.connections = [];
+  saveState();
+  updateBoardSelect();
+  loadBoardState(newId);
+  renderBoard();
+});
+
+const savedActiveId = localStorage.getItem(CURRENT_ID_KEY) || 'default';
+loadBoardsList();
+loadBoardState(savedActiveId);
+updateBoardSelect();
+initializeDrag();
+renderBoard();

package/src/tool/investigation-board/component.astro

@@ -0,0 +1,23 @@
+---
+import ControlPanel from './components/ControlPanel.astro';
+import BoardCanvas from './components/BoardCanvas.astro';
+import CardDrawer from './components/CardDrawer.astro';
+import ConnectionModal from './components/ConnectionModal.astro';
+import ContextMenu from './components/ContextMenu.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card investigation-board-main" data-ui={JSON.stringify(ui)}>
+  <ControlPanel labels={ui} />
+  <BoardCanvas labels={ui} />
+  <CardDrawer labels={ui} />
+  <ConnectionModal labels={ui} />
+  <ContextMenu labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/investigation-board/components/BoardCanvas.astro

@@ -0,0 +1,39 @@
+---
+---
+
+<div class="board-canvas-wrapper">
+  <div class="board-viewport" id="board-viewport">
+    <div class="connection-banner" id="connection-banner">
+      Click another card to link, or click background to cancel.
+    </div>
+    <div class="board-area" id="board-area">
+      <svg class="board-svg" id="board-connections-svg">
+
+        <defs>
+          <marker
+            id="arrowhead"
+            viewBox="0 0 10 10"
+            refX="6"
+            refY="5"
+            markerWidth="6"
+            markerHeight="6"
+            orient="auto-start-reverse"
+          >
+            <path d="M 0 1 L 10 5 L 0 9 z" fill="var(--text-muted)"></path>
+          </marker>
+        </defs>
+      </svg>
+      <div class="board-nodes" id="board-nodes-layer"></div>
+    </div>
+  </div>
+  <div class="zoom-controls">
+    <button type="button" id="zoom-out-btn" class="zoom-btn" aria-label="Zoom Out">-</button>
+    <span id="zoom-value" class="zoom-value">100%</span>
+    <button type="button" id="zoom-in-btn" class="zoom-btn" aria-label="Zoom In">+</button>
+    <button type="button" id="zoom-reset-btn" class="zoom-btn" aria-label="Reset Zoom">1:1</button>
+    <button type="button" id="fullscreen-toggle-btn" class="zoom-btn" aria-label="Toggle Fullscreen">
+      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display: block;"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
+    </button>
+  </div>
+</div>
+

package/src/tool/investigation-board/components/CardDrawer.astro

@@ -0,0 +1,73 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="card-drawer-overlay" id="card-drawer-overlay">
+  <div class="card-drawer" role="dialog" aria-modal="true" aria-labelledby="drawer-title">
+    <div class="drawer-header">
+      <h2 id="drawer-title" class="drawer-heading">{labels.cardName}</h2>
+      <button type="button" class="btn-close-drawer" id="close-drawer-btn" aria-label={labels.close}>
+        &times;
+      </button>
+    </div>
+
+    <form class="drawer-form" id="drawer-form" onSubmit="event.preventDefault();">
+      <input type="hidden" id="edit-node-id" />
+
+      <div class="form-group">
+        <label for="edit-node-name">{labels.cardName}</label>
+        <input type="text" id="edit-node-name" class="form-control" required />
+      </div>
+
+      <div class="form-group">
+        <label for="edit-node-category">{labels.cardCategory}</label>
+        <select id="edit-node-category" class="form-control">
+          <option value="character">{labels.character}</option>
+          <option value="clue">{labels.clue}</option>
+          <option value="location">{labels.location}</option>
+          <option value="item">{labels.item}</option>
+          <option value="custom">{labels.custom}</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="edit-node-description">{labels.cardDescription}</label>
+        <textarea id="edit-node-description" class="form-control" rows="2"></textarea>
+      </div>
+
+      <div class="form-group">
+        <label>{labels.cardNotes}</label>
+        <div id="edit-notes-list" class="notes-input-list"></div>
+        <button type="button" id="add-note-row-btn" class="btn btn-secondary btn-sm">+ Add Point</button>
+      </div>
+
+
+
+      <div class="form-group">
+        <label for="edit-node-tags">{labels.cardTags}</label>
+        <input type="text" id="edit-node-tags" class="form-control" />
+      </div>
+
+      <div class="form-group" id="color-picker-group">
+        <label for="edit-node-color">{labels.cardColor}</label>
+        <input type="color" id="edit-node-color" class="form-control color-picker" />
+      </div>
+
+      <div class="drawer-actions">
+        <button type="button" id="save-node-btn" class="btn btn-primary">
+          {labels.save}
+        </button>
+        <button type="button" id="delete-node-btn" class="btn btn-danger">
+          {labels.delete}
+        </button>
+        <button type="button" id="cancel-node-btn" class="btn btn-secondary">
+          {labels.cancel}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

package/src/tool/investigation-board/components/ConnectionModal.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="modal-overlay" id="connection-modal-overlay">
+  <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+    <div class="modal-header">
+      <h3 id="modal-title" class="modal-heading">{labels.addConnection}</h3>
+      <button type="button" class="btn-close-modal" id="close-modal-btn" aria-label={labels.close}>
+        &times;
+      </button>
+    </div>
+
+    <form class="modal-form" id="connection-form" onSubmit="event.preventDefault();">
+      <div class="form-group">
+        <label for="connection-source">{labels.sourceCard}</label>
+        <select id="connection-source" class="form-control" required></select>
+      </div>
+
+      <div class="form-group">
+        <label for="connection-target">{labels.targetCard}</label>
+        <select id="connection-target" class="form-control" required></select>
+      </div>
+
+      <div class="form-group">
+        <label for="connection-text">{labels.connectionLabel}</label>
+        <input type="text" id="connection-text" class="form-control" required />
+      </div>
+
+      <div class="form-group">
+        <label for="connection-color-picker">{labels.connectionColor}</label>
+        <input type="color" id="connection-color-picker" class="form-control color-picker" value="#f43f5e" />
+      </div>
+
+      <div class="modal-actions">
+        <button type="button" id="save-connection-btn" class="btn btn-primary">
+          {labels.save}
+        </button>
+        <button type="button" id="cancel-connection-btn" class="btn btn-secondary">
+          {labels.cancel}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

package/src/tool/investigation-board/components/ContextMenu.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div id="board-context-menu" class="context-menu">
+  <button type="button" id="ctx-add-card" class="context-menu-item">
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+    <span>{labels.addCard || 'Add Card'}</span>
+  </button>
+  <button type="button" id="ctx-edit-card" class="context-menu-item card-only">
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+    <span>Edit</span>
+  </button>
+  <button type="button" id="ctx-link-card" class="context-menu-item card-only">
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3 M9 17H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3 M8 12h8"></path></svg>
+    <span>Link</span>
+  </button>
+  <button type="button" id="ctx-delete-card" class="context-menu-item card-only danger">
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+    <span>Delete</span>
+  </button>
+</div>

package/src/tool/investigation-board/components/ControlPanel.astro

@@ -0,0 +1,57 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="control-panel">
+  <div class="search-filter-row">
+    <div class="search-box">
+      <input
+        type="text"
+        id="board-search"
+        placeholder={labels.searchPlaceholder}
+        class="form-control search-input"
+        aria-label="Search board elements"
+      />
+    </div>
+    <div class="filter-group">
+      <button type="button" class="btn btn-filter active" data-category="all">
+        {labels.filterAll}
+      </button>
+      <button type="button" class="btn btn-filter" data-category="character">
+        {labels.character}
+      </button>
+      <button type="button" class="btn btn-filter" data-category="clue">
+        {labels.clue}
+      </button>
+      <button type="button" class="btn btn-filter" data-category="location">
+        {labels.location}
+      </button>
+      <button type="button" class="btn btn-filter" data-category="item">
+        {labels.item}
+      </button>
+    </div>
+  </div>
+
+  <div class="board-management-row">
+    <select id="board-select" class="form-control"></select>
+    <button type="button" id="save-board-as-btn" class="btn btn-secondary">Save As</button>
+    <button type="button" id="new-board-btn" class="btn btn-secondary">+ New Board</button>
+  </div>
+
+  <div class="action-buttons-row">
+
+    <button type="button" id="add-card-btn" class="btn btn-primary btn-icon">
+      <span class="btn-text">{labels.addCard}</span>
+    </button>
+    <button type="button" id="add-connection-btn" class="btn btn-secondary btn-icon">
+      <span class="btn-text">{labels.addConnection}</span>
+    </button>
+    <button type="button" id="clear-board-btn" class="btn btn-danger btn-icon">
+      <span class="btn-text">{labels.clearBoard}</span>
+    </button>
+  </div>
+</div>