All files / src webview-project-context.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
9x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
10x
10x
10x
10x
10x
10x
10x
10x
10x
12x
12x
12x
12x
12x
10x
10x
10x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
2x
2x
2x
2x
2x
2x
2x
2x
2x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
9x
1x
8x
9x
9x
9x
9x
9x
9x
9x
9x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
 
import type { MeridianWorkspaceInfo } from "./meridian-workspace.js"
 
export type WebviewProjectEntry = {
  id: string
  name: string
  docs: string
  usCount: number
  isActive: boolean
}
 
export type WebviewProjectContext = {
  projectId: string
  projectName: string
  docsPath: string
  usCount: number
  multiProject: boolean
  projects: WebviewProjectEntry[]
}
 
export function buildWebviewProjectContext(info: MeridianWorkspaceInfo): WebviewProjectContext {
  const active = info.projects.find((p) => p.isActive) ?? info.projects[0]
  const docsPath = active?.docs ?? "docs"
  return {
    projectId: info.projectId,
    projectName: info.projectName,
    docsPath,
    usCount: info.usCount,
    multiProject: info.projects.length > 1,
    projects: info.projects.map((p) => ({
      id: p.id,
      name: p.name,
      docs: p.docs,
      usCount: p.usCount,
      isActive: p.isActive,
    })),
  }
}
 
export type MeridianPanelKind =
  | "Board"
  | "Versions"
  | "Sprints"
  | "Epics"
  | "Architecture"
  | "Decisions"
  | "Delivery Graph"
  | "Import Graph"
 
export function formatMeridianPanelTitle(
  kind: MeridianPanelKind,
  info: MeridianWorkspaceInfo,
  count?: number,
): string {
  const suffix = count !== undefined ? ` (${count})` : ""
  const ctx = buildWebviewProjectContext(info)
  const label = ctx.multiProject ? ctx.projectName : ctx.docsPath
  return `${kind} — ${label}${suffix}`
}
 
export const PROJECT_CONTEXT_STYLES = `
    .project-row { border-bottom: 1px solid var(--vscode-panel-border); padding-bottom: 8px; margin-bottom: 2px; }
    .project-select {
      font: inherit;
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 4px;
      border: 1px solid var(--vscode-widget-border);
      background: var(--vscode-input-background);
      color: var(--vscode-foreground);
      max-width: 200px;
    }
    .project-name {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 0;
    }
    .project-path {
      font-family: var(--vscode-editor-font-family, monospace);
      font-size: 11px;
      color: var(--vscode-descriptionForeground);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
`
 
export function projectContextToolbarHtml(context: WebviewProjectContext): string {
  const picker = context.multiProject
    ? `<select class="project-select" id="project-select" title="Active Meridian product"></select>`
    : `<span class="project-name" id="project-name"></span>`
  return `
  <div class="toolbar-row project-row">
    <span class="toolbar-label">Project</span>
    ${picker}
    <span class="project-path" id="project-path" title="docs/ path"></span>
    <span class="count" id="project-us"></span>
  </div>`
}
 
export const PROJECT_CONTEXT_SCRIPT = `
    function wireProjectContext(ctx) {
      const pathEl = document.getElementById("project-path");
      const usEl = document.getElementById("project-us");
      if (pathEl) {
        pathEl.textContent = ctx.docsPath;
        pathEl.title = ctx.docsPath;
      }
      if (usEl) {
        usEl.textContent = ctx.usCount + " US";
      }
      const sel = document.getElementById("project-select");
      if (sel && ctx.multiProject) {
        sel.innerHTML = "";
        for (const p of ctx.projects) {
          const opt = document.createElement("option");
          opt.value = p.id;
          opt.textContent = p.name + " (" + p.docs + ")";
          if (p.isActive) opt.selected = true;
          sel.appendChild(opt);
        }
        sel.onchange = () => {
          if (sel.value && sel.value !== ctx.projectId) {
            vscode.postMessage({ type: "selectProject", id: sel.value });
          }
        };
        return;
      }
      const nameEl = document.getElementById("project-name");
      if (nameEl) {
        nameEl.textContent = ctx.projectName;
        nameEl.title = ctx.docsPath;
      }
    }
`