@unbrained/pm-web 1.0.0

package/public/src/views/router.ts

@@ -0,0 +1,188 @@
+// ═══════════════════════════════════════════════════════════════
+// ROUTER — View switching with URL routing
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { VIEW_NAMES } from '../constants.js';
+import { renderProjectsView } from './projects.js';
+import { renderItemsView } from './items.js';
+import { renderCreateView } from './create.js';
+import { renderActivityView } from './activity.js';
+import { renderSearchView } from './search.js';
+import { renderStatsView } from './stats.js';
+import { renderCalendarView } from './calendar.js';
+import { renderContextView } from './context.js';
+import { renderGraphView } from './graph.js';
+import { renderSharingView } from './sharing.js';
+import { renderGroupsView } from './groups.js';
+import { renderHealthView } from './health.js';
+import { renderDedupeAuditView } from './dedupe.js';
+import { renderValidateView } from './validate.js';
+import { renderSettingsView } from './settings.js';
+import { renderGitHubView } from './github.js';
+import { renderExportView } from './export.js';
+import { renderNormalizeView } from './normalize.js';
+import { renderSharedView } from './shared.js';
+import { renderTemplatesView } from './templates.js';
+import { renderCommentsAuditView } from './comments-audit.js';
+import { renderConfigView } from './config.js';
+import { renderGuideView } from './guide.js';
+import { renderAdminView } from './admin.js';
+import { initPlanView } from './plan.js';
+
+// View name → URL path mapping
+const VIEW_TO_PATH: Record<string, string> = {
+  'projects': '/',
+  'items': '/items',
+  'create': '/create',
+  'activity': '/activity',
+  'search': '/search',
+  'stats': '/stats',
+  'calendar': '/calendar',
+  'context': '/context',
+  'graph': '/graph',
+  'sharing': '/sharing',
+  'groups': '/groups',
+  'health': '/health',
+  'dedupe': '/dedupe',
+  'validate': '/validate',
+  'settings': '/settings',
+  'github': '/github',
+  'export': '/export',
+  'normalize': '/normalize',
+  'shared': '/shared',
+  'templates': '/templates',
+  'comments-audit': '/comments-audit',
+  'config': '/config',
+  'guide': '/guide',
+  'admin': '/admin',
+  'plan': '/plan',
+};
+
+// Reverse: URL path → view name
+const PATH_TO_VIEW: Record<string, string> = {};
+for (const [view, path] of Object.entries(VIEW_TO_PATH)) {
+  PATH_TO_VIEW[path] = view;
+}
+
+// Whether pushState was just called (to ignore the resulting popstate)
+let navigatingInternally = false;
+
+// Callback invoked when the view changes — used to notify presence service
+let onViewChange: ((view: string) => void) | null = null;
+export function setOnViewChange(cb: (view: string) => void): void {
+  onViewChange = cb;
+}
+
+export function getPathForView(view: string): string {
+  return VIEW_TO_PATH[view] || '/';
+}
+
+export function getViewForPath(path: string): string {
+  // Normalize: remove trailing slash except for root
+  const normalized = path.replace(/\/$/, '') || '/';
+  // Direct match
+  if (PATH_TO_VIEW[normalized]) return PATH_TO_VIEW[normalized];
+  // Try matching first segment for deeper paths (e.g. /items/DETAIL-1 → items)
+  const firstSegment = '/' + normalized.slice(1).split('/')[0];
+  return PATH_TO_VIEW[firstSegment] || 'projects';
+}
+
+export function showView(view: string, pushState = true): void {
+  if (view === 'admin' && !state.user?.is_admin) {
+    history.replaceState({ view: 'projects' }, '', '/');
+    view = 'projects';
+  }
+  state.currentView = view;
+
+  // Update URL via pushState
+  if (pushState) {
+    const path = getPathForView(view);
+    if (window.location.pathname !== path) {
+      navigatingInternally = true;
+      history.pushState({ view }, '', path);
+    }
+  }
+
+  // Full-screen graph mode: hide sidebar
+  document.body.classList.toggle('graph-mode', view === 'graph');
+  VIEW_NAMES.forEach(v => {
+    const el = document.getElementById(`content-${v}`);
+    if (el) el.style.display = v === view ? '' : 'none';
+  });
+  document.querySelectorAll('.sidebar-item[data-view]').forEach(el => {
+    (el as HTMLElement).classList.toggle('active', (el as HTMLElement).dataset.view === view);
+  });
+  if (view === 'projects') {
+    document.querySelectorAll('#sidebar-projects-section .sidebar-item').forEach((el,i) => {
+      (el as HTMLElement).classList.toggle('active', i===0);
+    });
+  }
+  switch(view) {
+    case 'projects': renderProjectsView(); break;
+    case 'items': renderItemsView(); break;
+    case 'create': renderCreateView(); break;
+    case 'activity': renderActivityView(); break;
+    case 'search': renderSearchView(); break;
+    case 'stats': renderStatsView(); break;
+    case 'calendar': renderCalendarView(); break;
+    case 'context': renderContextView(); break;
+    case 'graph': renderGraphView(); break;
+    case 'sharing': renderSharingView(); break;
+    case 'groups': renderGroupsView(); break;
+    case 'health': renderHealthView(); break;
+    case 'dedupe': renderDedupeAuditView(); break;
+    case 'validate': renderValidateView(); break;
+    case 'settings': renderSettingsView(); break;
+    case 'github': renderGitHubView(); break;
+    case 'export': renderExportView(); break;
+    case 'normalize': renderNormalizeView(); break;
+    case 'shared': renderSharedView(); break;
+    case 'templates': renderTemplatesView(); break;
+    case 'comments-audit': renderCommentsAuditView(); break;
+    case 'config': renderConfigView(); break;
+    case 'guide': renderGuideView(); break;
+    case 'admin': renderAdminView(); break;
+    case 'plan': void initPlanView(); break;
+  }
+  updateMobileNav(view);
+
+  // Notify presence service of view change
+  onViewChange?.(view);
+
+  // Scroll main content to top on view change
+  const mainContent = document.getElementById('main-content');
+  if (mainContent) mainContent.scrollTop = 0;
+
+  // Move focus to main content for accessibility
+  const activeArea = document.getElementById(`content-${view}`);
+  if (activeArea) {
+    activeArea.setAttribute('tabindex', '-1');
+    activeArea.focus({ preventScroll: true });
+  }
+}
+
+function updateMobileNav(view: string): void {
+  document.querySelectorAll('.mobile-bottom-nav-item').forEach(el => {
+    (el as HTMLElement).classList.toggle('active', (el as HTMLElement).dataset.mobview === view);
+  });
+  const nav = document.getElementById('mobile-bottom-nav');
+  if (nav) {
+    nav.classList.toggle('visible', !!state.currentProject && view !== 'projects');
+  }
+}
+
+// Handle browser back/forward
+function onPopState(e: PopStateEvent): void {
+  // Ignore if we just pushed state (some browsers fire popstate after pushState)
+  if (navigatingInternally) {
+    navigatingInternally = false;
+    return;
+  }
+  const view = e.state?.view || getViewForPath(window.location.pathname);
+  showView(view, false);
+}
+
+// Initialize popstate listener
+if (typeof window !== 'undefined') {
+  window.addEventListener('popstate', onPopState);
+}

package/public/src/views/search.js

@@ -0,0 +1,103 @@
+// ═══════════════════════════════════════════════════════════════
+// SEARCH VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+import { renderItemRow } from './items.js';
+let searchTimer;
+export function renderSearchView() {
+    const el = document.getElementById('content-search');
+    if (!el)
+        return;
+    if (!state.currentProject) {
+        el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+        return;
+    }
+    const modeOpts = [
+        { val: 'hybrid', label: 'Hybrid', tip: 'Keyword + semantic (best)' },
+        { val: 'semantic', label: 'Semantic', tip: 'Ollama qwen3 embeddings' },
+        { val: 'keyword', label: 'Keyword', tip: 'Fast exact match' },
+    ];
+    el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Search</div><div class="page-subtitle">Search items in ${escHtml(state.currentProject.name)}</div></div>
+    </div>
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap">
+      <div style="display:flex;gap:4px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:3px">
+        ${modeOpts.map(m => `<button class="btn btn-sm" style="padding:4px 10px;border-radius:5px;font-size:12px;transition:var(--transition);${state.searchMode === m.val ? 'background:var(--bg-card);color:var(--text-primary)' : 'background:transparent;color:var(--text-muted)'}" onclick="window.__app.setSearchMode('${m.val}')" title="${m.tip}">${m.label}</button>`).join('')}
+      </div>
+      <button class="btn btn-secondary btn-sm" id="reindex-btn" onclick="window.__app.reindexProject()">⟳ Reindex</button>
+      <span style="font-size:11px;color:var(--text-muted)">Semantic powered by Ollama qwen3</span>
+    </div>
+    <div class="search-box-wrap">
+      <span class="search-icon">⌕</span>
+      <input class="search-input" id="search-query" type="text" placeholder="Search items by title, description, tags…" value="${escHtml(state.searchQuery)}" oninput="window.__app.debouncedSearch()" onkeydown="if(event.key==='Enter')window.__app.doSearch()">
+    </div>
+    <div id="search-results">
+      ${state.searchResults.length > 0 ? renderSearchResults() : '<div class="empty-state"><div class="empty-state-icon">⌕</div><div class="empty-state-text">Enter a query to search</div></div>'}
+    </div>`;
+    setTimeout(() => document.getElementById('search-query')?.focus(), 50);
+}
+export function setSearchMode(mode) {
+    state.searchMode = mode;
+    state.searchResults = [];
+    renderSearchView();
+    if (state.searchQuery)
+        doSearch();
+}
+export async function reindexProject() {
+    if (!state.currentProject)
+        return;
+    const btn = document.getElementById('reindex-btn');
+    if (!btn)
+        return;
+    btn.disabled = true;
+    btn.textContent = '⟳ Reindexing…';
+    const mode = state.searchMode;
+    try {
+        await api('POST', `/projects/${state.currentProject.id}/pm/reindex`, { mode });
+        toast(`Reindex complete (${mode})`, 'success');
+    }
+    catch (err) {
+        toast(`Reindex failed: ${err instanceof Error ? err.message : String(err)}`, 'error');
+    }
+    finally {
+        btn.disabled = false;
+        btn.textContent = '⟳ Reindex';
+    }
+}
+export function debouncedSearch() {
+    clearTimeout(searchTimer);
+    state.searchQuery = document.getElementById('search-query')?.value || '';
+    searchTimer = setTimeout(doSearch, 350);
+}
+export async function doSearch() {
+    const query = (document.getElementById('search-query')?.value || '').trim();
+    if (!query || !state.currentProject)
+        return;
+    state.searchQuery = query;
+    const resultsEl = document.getElementById('search-results');
+    if (resultsEl)
+        resultsEl.innerHTML = '<div class="loading-state"><div class="loading-spinner"></div></div>';
+    try {
+        const data = await api('POST', `/projects/${state.currentProject.id}/pm/search`, { query, mode: state.searchMode });
+        state.searchResults = data.results || data.items || [];
+        if (resultsEl)
+            resultsEl.innerHTML = state.searchResults.length === 0
+                ? `<div class="empty-state"><div class="empty-state-text">No results for "${escHtml(query)}"</div></div>`
+                : renderSearchResults();
+    }
+    catch (err) {
+        if (resultsEl)
+            resultsEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    }
+}
+function renderSearchResults() {
+    if (!state.searchResults.length)
+        return '';
+    return `<div style="color:var(--text-muted);font-size:12px;margin-bottom:8px">${state.searchResults.length} result${state.searchResults.length !== 1 ? 's' : ''}</div>
+    <div class="item-list">${state.searchResults.map(item => renderItemRow(item)).join('')}</div>`;
+}
+//# sourceMappingURL=search.js.map

package/public/src/views/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["search.ts"],"names":[],"mappings":"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"}

package/public/src/views/search.ts

@@ -0,0 +1,94 @@
+// ═══════════════════════════════════════════════════════════════
+// SEARCH VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+import { renderItemRow } from './items.js';
+
+let searchTimer: ReturnType<typeof setTimeout>;
+
+export function renderSearchView(): void {
+  const el = document.getElementById('content-search');
+  if (!el) return;
+  if (!state.currentProject) { el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>'; return; }
+  const modeOpts = [
+    { val: 'hybrid', label: 'Hybrid', tip: 'Keyword + semantic (best)' },
+    { val: 'semantic', label: 'Semantic', tip: 'Ollama qwen3 embeddings' },
+    { val: 'keyword', label: 'Keyword', tip: 'Fast exact match' },
+  ];
+  el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Search</div><div class="page-subtitle">Search items in ${escHtml(state.currentProject.name)}</div></div>
+    </div>
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap">
+      <div style="display:flex;gap:4px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:3px">
+        ${modeOpts.map(m=>`<button class="btn btn-sm" style="padding:4px 10px;border-radius:5px;font-size:12px;transition:var(--transition);${state.searchMode===m.val?'background:var(--bg-card);color:var(--text-primary)':'background:transparent;color:var(--text-muted)'}" onclick="window.__app.setSearchMode('${m.val}')" title="${m.tip}">${m.label}</button>`).join('')}
+      </div>
+      <button class="btn btn-secondary btn-sm" id="reindex-btn" onclick="window.__app.reindexProject()">⟳ Reindex</button>
+      <span style="font-size:11px;color:var(--text-muted)">Semantic powered by Ollama qwen3</span>
+    </div>
+    <div class="search-box-wrap">
+      <span class="search-icon">⌕</span>
+      <input class="search-input" id="search-query" type="text" placeholder="Search items by title, description, tags…" value="${escHtml(state.searchQuery)}" oninput="window.__app.debouncedSearch()" onkeydown="if(event.key==='Enter')window.__app.doSearch()">
+    </div>
+    <div id="search-results">
+      ${state.searchResults.length > 0 ? renderSearchResults() : '<div class="empty-state"><div class="empty-state-icon">⌕</div><div class="empty-state-text">Enter a query to search</div></div>'}
+    </div>`;
+  setTimeout(()=>document.getElementById('search-query')?.focus(),50);
+}
+
+export function setSearchMode(mode: string): void {
+  state.searchMode = mode;
+  state.searchResults = [];
+  renderSearchView();
+  if (state.searchQuery) doSearch();
+}
+
+export async function reindexProject(): Promise<void> {
+  if (!state.currentProject) return;
+  const btn = document.getElementById('reindex-btn') as HTMLButtonElement | null;
+  if (!btn) return;
+  btn.disabled = true;
+  btn.textContent = '⟳ Reindexing…';
+  const mode = state.searchMode as string;
+  try {
+    await api('POST',`/projects/${state.currentProject.id}/pm/reindex`,{mode});
+    toast(`Reindex complete (${mode})`, 'success');
+  } catch(err: unknown) {
+    toast(`Reindex failed: ${err instanceof Error ? err.message : String(err)}`,'error');
+  } finally {
+    btn.disabled = false;
+    btn.textContent = '⟳ Reindex';
+  }
+}
+
+export function debouncedSearch(): void {
+  clearTimeout(searchTimer);
+  state.searchQuery = (document.getElementById('search-query') as HTMLInputElement | null)?.value || '';
+  searchTimer = setTimeout(doSearch, 350);
+}
+
+export async function doSearch(): Promise<void> {
+  const query = ((document.getElementById('search-query') as HTMLInputElement | null)?.value || '').trim();
+  if (!query || !state.currentProject) return;
+  state.searchQuery = query;
+  const resultsEl = document.getElementById('search-results');
+  if (resultsEl) resultsEl.innerHTML = '<div class="loading-state"><div class="loading-spinner"></div></div>';
+  try {
+    const data = await api('POST',`/projects/${state.currentProject.id}/pm/search`,{query,mode:state.searchMode});
+    state.searchResults = (data as any).results || (data as any).items || [];
+    if (resultsEl) resultsEl.innerHTML = state.searchResults.length === 0
+      ? `<div class="empty-state"><div class="empty-state-text">No results for "${escHtml(query)}"</div></div>`
+      : renderSearchResults();
+  } catch(err: unknown) {
+    if (resultsEl) resultsEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}
+
+function renderSearchResults(): string {
+  if (!state.searchResults.length) return '';
+  return `<div style="color:var(--text-muted);font-size:12px;margin-bottom:8px">${state.searchResults.length} result${state.searchResults.length!==1?'s':''}</div>
+    <div class="item-list">${state.searchResults.map(item=>renderItemRow(item)).join('')}</div>`;
+}