version-pill-react 1.2.6 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +7 -1
  2. package/dist/index.d.ts +7 -1
  3. package/dist/index.js +476 -253
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +476 -253
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -80,7 +80,11 @@ var COLUMN_LABELS = {
80
80
  backlog: "Backlog",
81
81
  todo: "Planned",
82
82
  "in-progress": "In Progress",
83
- done: "Shipped"
83
+ "in progress": "In Progress",
84
+ inProgress: "In Progress",
85
+ done: "Shipped",
86
+ shipped: "Shipped",
87
+ completed: "Shipped"
84
88
  };
85
89
  function useTheme(theme) {
86
90
  const [resolved, setResolved] = (0, import_react.useState)("light");
@@ -119,6 +123,13 @@ function VersionPill({
119
123
  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
120
124
  const [activeTab, setActiveTab] = (0, import_react.useState)("changelog");
121
125
  const [hasNewVersion, setHasNewVersion] = (0, import_react.useState)(false);
126
+ const [showIdeaForm, setShowIdeaForm] = (0, import_react.useState)(false);
127
+ const [ideaTitle, setIdeaTitle] = (0, import_react.useState)("");
128
+ const [ideaDescription, setIdeaDescription] = (0, import_react.useState)("");
129
+ const [ideaAuthorName, setIdeaAuthorName] = (0, import_react.useState)("");
130
+ const [ideaAuthorEmail, setIdeaAuthorEmail] = (0, import_react.useState)("");
131
+ const [submittingIdea, setSubmittingIdea] = (0, import_react.useState)(false);
132
+ const [ideaSubmitMessage, setIdeaSubmitMessage] = (0, import_react.useState)(null);
122
133
  const resolvedTheme = useTheme(theme);
123
134
  const isLight = resolvedTheme === "light";
124
135
  const sizeConfig = SIZE_CONFIG[size];
@@ -164,7 +175,26 @@ function VersionPill({
164
175
  const response = await fetch(`${baseUrl}/api/roadmap/${projectId}`);
165
176
  if (!response.ok) return;
166
177
  const data = await response.json();
167
- setRoadmapTasks(data.tasks || []);
178
+ let tasks = [];
179
+ if (Array.isArray(data.tasks)) {
180
+ tasks = data.tasks;
181
+ } else if (data.tasks && typeof data.tasks === "object") {
182
+ const grouped = data.tasks;
183
+ const mapTask = (t, defaultColumn) => ({
184
+ id: t.id || t._id,
185
+ title: t.title,
186
+ description: t.description,
187
+ type: t.type || "feature",
188
+ priority: t.priority || "medium",
189
+ column: t.columnId || defaultColumn,
190
+ columnId: t.columnId,
191
+ columnName: t.columnName
192
+ });
193
+ const inProgress = (grouped.inProgress || []).map((t) => mapTask(t, "in-progress"));
194
+ const planned = (grouped.planned || []).map((t) => mapTask(t, "todo"));
195
+ tasks = [...inProgress, ...planned];
196
+ }
197
+ setRoadmapTasks(tasks);
168
198
  } catch {
169
199
  }
170
200
  }, [projectId, baseUrl]);
@@ -177,6 +207,36 @@ function VersionPill({
177
207
  } catch {
178
208
  }
179
209
  }, [projectId, baseUrl]);
210
+ const submitIdea = (0, import_react.useCallback)(async () => {
211
+ if (!ideaTitle.trim()) return;
212
+ setSubmittingIdea(true);
213
+ setIdeaSubmitMessage(null);
214
+ try {
215
+ const response = await fetch(`${baseUrl}/api/ideas/${projectId}`, {
216
+ method: "POST",
217
+ headers: { "Content-Type": "application/json" },
218
+ body: JSON.stringify({
219
+ title: ideaTitle.trim(),
220
+ description: ideaDescription.trim() || void 0,
221
+ authorName: ideaAuthorName.trim() || void 0,
222
+ authorEmail: ideaAuthorEmail.trim() || void 0
223
+ })
224
+ });
225
+ if (!response.ok) {
226
+ const error = await response.json().catch(() => ({ error: "Failed to submit" }));
227
+ throw new Error(error.error || "Failed to submit idea");
228
+ }
229
+ setIdeaSubmitMessage({ type: "success", text: "Thanks! Your idea has been submitted." });
230
+ setIdeaTitle("");
231
+ setIdeaDescription("");
232
+ setShowIdeaForm(false);
233
+ fetchIdeas();
234
+ } catch (err) {
235
+ setIdeaSubmitMessage({ type: "error", text: err.message || "Failed to submit idea" });
236
+ } finally {
237
+ setSubmittingIdea(false);
238
+ }
239
+ }, [baseUrl, projectId, ideaTitle, ideaDescription, ideaAuthorName, ideaAuthorEmail, fetchIdeas]);
180
240
  (0, import_react.useEffect)(() => {
181
241
  fetchVersion();
182
242
  }, [fetchVersion]);
@@ -306,7 +366,7 @@ function VersionPill({
306
366
  }, {});
307
367
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
308
368
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(positionStyles[position], className), style: { display: "inline-flex" }, children: renderBadge() }),
309
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
369
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
310
370
  position: "fixed",
311
371
  top: 0,
312
372
  left: 0,
@@ -316,231 +376,391 @@ function VersionPill({
316
376
  height: "100vh",
317
377
  zIndex: 2147483647,
318
378
  display: "flex",
319
- alignItems: "center",
320
- justifyContent: "center",
321
- padding: 20,
322
- boxSizing: "border-box"
323
- }, children: [
324
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
325
- "div",
326
- {
327
- onClick: () => setIsOpen(false),
328
- style: {
329
- position: "fixed",
330
- top: 0,
331
- left: 0,
332
- width: "100vw",
333
- height: "100vh",
334
- background: isLight ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.7)",
335
- backdropFilter: "blur(4px)",
336
- WebkitBackdropFilter: "blur(4px)"
337
- }
338
- }
339
- ),
340
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
341
- "div",
342
- {
343
- style: {
344
- position: "relative",
345
- zIndex: 1,
346
- display: "flex",
347
- flexDirection: "column",
348
- width: "100%",
349
- maxWidth: 400,
350
- maxHeight: "min(480px, 70vh)",
351
- borderRadius: 12,
352
- boxShadow: isLight ? "0 20px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)" : "0 20px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)",
353
- background: isLight ? "#fff" : "#1a1a1a",
354
- overflow: "hidden"
355
- },
356
- children: [
357
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
358
- "div",
359
- {
360
- style: {
361
- flexShrink: 0,
362
- padding: "14px 16px",
363
- borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
364
- display: "flex",
365
- alignItems: "center",
366
- justifyContent: "space-between"
367
- },
368
- children: [
369
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
370
- project?.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 18 }, children: project.icon }),
371
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
372
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { fontWeight: 600, fontSize: 15, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
373
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 11, color: isLight ? "#71717a" : "#a1a1aa", margin: 0 }, children: [
374
- "v",
375
- currentVersion
376
- ] })
379
+ flexDirection: "column",
380
+ boxSizing: "border-box",
381
+ background: isLight ? "#fff" : "#0a0a0a"
382
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
383
+ "div",
384
+ {
385
+ style: {
386
+ display: "flex",
387
+ flexDirection: "column",
388
+ width: "100%",
389
+ height: "100%",
390
+ borderRadius: 12,
391
+ overflow: "hidden"
392
+ },
393
+ children: [
394
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
395
+ "div",
396
+ {
397
+ style: {
398
+ flexShrink: 0,
399
+ padding: "16px 20px",
400
+ borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`,
401
+ display: "flex",
402
+ alignItems: "center",
403
+ justifyContent: "space-between"
404
+ },
405
+ children: [
406
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
407
+ project?.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 24 }, children: project.icon }),
408
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
409
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { fontWeight: 600, fontSize: 18, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
410
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 13, color: isLight ? "#71717a" : "#a1a1aa", margin: 0 }, children: [
411
+ "v",
412
+ currentVersion
377
413
  ] })
378
- ] }),
379
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
380
- "button",
381
- {
382
- onClick: () => setIsOpen(false),
383
- style: {
384
- width: 28,
385
- height: 28,
386
- display: "flex",
387
- alignItems: "center",
388
- justifyContent: "center",
389
- borderRadius: 6,
390
- background: isLight ? "#f5f5f5" : "#2a2a2a",
391
- border: "none",
392
- cursor: "pointer",
393
- color: isLight ? "#71717a" : "#a1a1aa",
394
- transition: "background 150ms"
395
- },
396
- onMouseEnter: (e) => e.currentTarget.style.background = isLight ? "#e5e5e5" : "#3a3a3a",
397
- onMouseLeave: (e) => e.currentTarget.style.background = isLight ? "#f5f5f5" : "#2a2a2a",
398
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
399
- }
400
- )
401
- ]
402
- }
403
- ),
404
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
405
- "div",
406
- {
407
- style: {
408
- flexShrink: 0,
409
- display: "flex",
410
- gap: 2,
411
- padding: "8px 12px",
412
- borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
413
- background: isLight ? "#fafafa" : "#151515"
414
- },
415
- children: ["changelog", "roadmap", "ideas"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
414
+ ] })
415
+ ] }),
416
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
416
417
  "button",
417
418
  {
418
- onClick: () => setActiveTab(tab),
419
+ onClick: () => setIsOpen(false),
419
420
  style: {
420
- padding: "6px 10px",
421
- borderRadius: 6,
421
+ width: 36,
422
+ height: 36,
423
+ display: "flex",
424
+ alignItems: "center",
425
+ justifyContent: "center",
426
+ borderRadius: 8,
427
+ background: isLight ? "#f5f5f5" : "#1f1f1f",
422
428
  border: "none",
423
429
  cursor: "pointer",
424
- fontSize: 12,
425
- fontWeight: 500,
426
- background: activeTab === tab ? isLight ? "#fff" : "#2a2a2a" : "transparent",
427
- color: activeTab === tab ? isLight ? "#18181b" : "#fff" : isLight ? "#71717a" : "#71717a",
428
- boxShadow: activeTab === tab ? isLight ? "0 1px 2px rgba(0,0,0,0.05)" : "0 1px 2px rgba(0,0,0,0.2)" : "none",
429
- transition: "all 150ms"
430
+ color: isLight ? "#71717a" : "#a1a1aa",
431
+ transition: "background 150ms"
430
432
  },
431
- children: [
432
- tab === "changelog" && "Changelog",
433
- tab === "roadmap" && "Roadmap",
434
- tab === "ideas" && "Ideas"
435
- ]
433
+ onMouseEnter: (e) => e.currentTarget.style.background = isLight ? "#e5e5e5" : "#2a2a2a",
434
+ onMouseLeave: (e) => e.currentTarget.style.background = isLight ? "#f5f5f5" : "#1f1f1f",
435
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
436
+ }
437
+ )
438
+ ]
439
+ }
440
+ ),
441
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
442
+ "div",
443
+ {
444
+ style: {
445
+ flexShrink: 0,
446
+ display: "flex",
447
+ gap: 4,
448
+ padding: "12px 20px",
449
+ borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`
450
+ },
451
+ children: ["changelog", "roadmap", "ideas"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
452
+ "button",
453
+ {
454
+ onClick: () => setActiveTab(tab),
455
+ style: {
456
+ padding: "10px 16px",
457
+ borderRadius: 8,
458
+ border: "none",
459
+ cursor: "pointer",
460
+ fontSize: 14,
461
+ fontWeight: 500,
462
+ background: activeTab === tab ? isLight ? "#18181b" : "#fff" : "transparent",
463
+ color: activeTab === tab ? isLight ? "#fff" : "#18181b" : isLight ? "#71717a" : "#71717a",
464
+ transition: "all 150ms"
436
465
  },
437
- tab
438
- ))
439
- }
440
- ),
441
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, overflowY: "auto", padding: 12, minHeight: 0 }, children: [
442
- activeTab === "changelog" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: versionsArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
443
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F680}" }),
444
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No releases yet" })
445
- ] }) : versionsArray.slice(0, 5).map((version, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12, paddingBottom: 12, borderBottom: idx < versionsArray.length - 1 && idx < 4 ? `1px solid ${isLight ? "#f0f0f0" : "#252525"}` : "none" }, children: [
446
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
447
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14 }, children: version.emoji || "\u{1F4E6}" }),
448
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, fontSize: 13, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
449
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
450
- "span",
451
- {
452
- style: {
453
- padding: "1px 5px",
454
- fontSize: 9,
455
- fontWeight: 500,
456
- borderRadius: 3,
457
- background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : isLight ? "#f4f4f5" : "#2a2a2a",
458
- color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : isLight ? "#52525b" : "#a1a1aa"
459
- },
460
- children: version.type
461
- }
462
- )
463
- ] }),
464
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", marginBottom: 6 }, children: [
465
- "v",
466
- version.version,
467
- " \xB7 ",
468
- new Date(version.date).toLocaleDateString()
469
- ] }),
470
- version.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 12, color: isLight ? "#52525b" : "#a1a1aa", margin: "0 0 6px 0", lineHeight: 1.5 }, children: version.description }),
471
- version.features && version.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { style: { margin: 0, paddingLeft: 0, listStyle: "none" }, children: [
472
- version.features.slice(0, 4).map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { display: "flex", alignItems: "flex-start", gap: 6, fontSize: 12, color: isLight ? "#52525b" : "#a1a1aa", marginBottom: 2, lineHeight: 1.4 }, children: [
473
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#22c55e", fontSize: 11 }, children: "\u2713" }),
474
- feature
475
- ] }, i)),
476
- version.features.length > 4 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { fontSize: 11, color: isLight ? "#a1a1aa" : "#525252", marginTop: 2 }, children: [
477
- "+",
478
- version.features.length - 4,
479
- " more..."
480
- ] })
481
- ] })
482
- ] }, idx)) }),
483
- activeTab === "roadmap" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: Object.keys(groupedTasks).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
484
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F5FA}\uFE0F" }),
485
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No public roadmap items" })
486
- ] }) : ["in-progress", "todo", "backlog"].map((col) => {
466
+ children: [
467
+ tab === "changelog" && "\u{1F680} Changelog",
468
+ tab === "roadmap" && "\u{1F5FA}\uFE0F Roadmap",
469
+ tab === "ideas" && "\u{1F4A1} Ideas"
470
+ ]
471
+ },
472
+ tab
473
+ ))
474
+ }
475
+ ),
476
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, overflowY: "auto", padding: "20px 24px", minHeight: 0 }, children: [
477
+ activeTab === "changelog" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { maxWidth: 640 }, children: versionsArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 60, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
478
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 48, marginBottom: 12 }, children: "\u{1F680}" }),
479
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 16 }, children: "No releases yet" })
480
+ ] }) : versionsArray.slice(0, 10).map((version, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 24, paddingBottom: 24, borderBottom: idx < versionsArray.length - 1 && idx < 9 ? `1px solid ${isLight ? "#f0f0f0" : "#1f1f1f"}` : "none" }, children: [
481
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [
482
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 20 }, children: version.emoji || "\u{1F4E6}" }),
483
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, fontSize: 18, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
484
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
485
+ "span",
486
+ {
487
+ style: {
488
+ padding: "3px 8px",
489
+ fontSize: 11,
490
+ fontWeight: 500,
491
+ borderRadius: 4,
492
+ background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : isLight ? "#f4f4f5" : "#1f1f1f",
493
+ color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : isLight ? "#52525b" : "#a1a1aa"
494
+ },
495
+ children: version.type
496
+ }
497
+ )
498
+ ] }),
499
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 13, color: isLight ? "#71717a" : "#71717a", marginBottom: 10 }, children: [
500
+ "v",
501
+ version.version,
502
+ " \xB7 ",
503
+ new Date(version.date).toLocaleDateString()
504
+ ] }),
505
+ version.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 15, color: isLight ? "#52525b" : "#a1a1aa", margin: "0 0 12px 0", lineHeight: 1.6 }, children: version.description }),
506
+ version.features && version.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { margin: 0, paddingLeft: 0, listStyle: "none" }, children: version.features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, color: isLight ? "#52525b" : "#a1a1aa", marginBottom: 6, lineHeight: 1.5 }, children: [
507
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#22c55e", fontSize: 14, marginTop: 2 }, children: "\u2713" }),
508
+ feature
509
+ ] }, i)) })
510
+ ] }, idx)) }),
511
+ activeTab === "roadmap" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { maxWidth: 640 }, children: Object.keys(groupedTasks).length === 0 || tasksArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 60, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
512
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 48, marginBottom: 12 }, children: "\u{1F5FA}\uFE0F" }),
513
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 16 }, children: "No public roadmap items" })
514
+ ] }) : (
515
+ // Show all columns that have tasks, prioritizing known columns first
516
+ [.../* @__PURE__ */ new Set([
517
+ ...["in-progress", "todo", "backlog"].filter((c) => groupedTasks[c]?.length > 0),
518
+ ...Object.keys(groupedTasks).filter((c) => !["in-progress", "todo", "backlog", "done"].includes(c))
519
+ ])].map((col) => {
487
520
  const tasks = groupedTasks[col];
488
521
  if (!tasks || tasks.length === 0) return null;
489
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
490
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { style: { fontSize: 10, fontWeight: 600, color: isLight ? "#a1a1aa" : "#71717a", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.5px" }, children: [
491
- COLUMN_LABELS[col] || col,
522
+ const columnLabel = tasks[0]?.columnName || COLUMN_LABELS[col] || col;
523
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 24 }, children: [
524
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { style: { fontSize: 12, fontWeight: 600, color: isLight ? "#a1a1aa" : "#71717a", marginBottom: 12, textTransform: "uppercase", letterSpacing: "0.5px" }, children: [
525
+ columnLabel,
492
526
  " (",
493
527
  tasks.length,
494
528
  ")"
495
529
  ] }),
496
- tasks.slice(0, 4).map((task) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
530
+ tasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
497
531
  "div",
498
532
  {
499
533
  style: {
500
- padding: "8px 10px",
501
- marginBottom: 4,
502
- borderRadius: 5,
503
- background: isLight ? "#f5f5f5" : "#252525"
534
+ padding: "12px 16px",
535
+ marginBottom: 8,
536
+ borderRadius: 8,
537
+ background: isLight ? "#f5f5f5" : "#151515",
538
+ border: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`
504
539
  },
505
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
540
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 10 }, children: [
506
541
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
507
542
  "span",
508
543
  {
509
544
  style: {
510
- width: 6,
511
- height: 6,
545
+ width: 8,
546
+ height: 8,
512
547
  borderRadius: "50%",
513
548
  background: TYPE_COLORS[task.type] || "#71717a",
514
- flexShrink: 0
549
+ flexShrink: 0,
550
+ marginTop: 5
515
551
  }
516
552
  }
517
553
  ),
518
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, color: isLight ? "#18181b" : "#fff", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: task.title })
554
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
555
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14, color: isLight ? "#18181b" : "#fff" }, children: task.title }),
556
+ task.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 13, color: isLight ? "#71717a" : "#a1a1aa", margin: "4px 0 0 0", lineHeight: 1.5 }, children: task.description })
557
+ ] })
519
558
  ] })
520
559
  },
521
560
  task.id
522
- )),
523
- tasks.length > 4 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", marginTop: 4 }, children: [
524
- "+",
525
- tasks.length - 4,
526
- " more..."
527
- ] })
561
+ ))
528
562
  ] }, col);
529
- }) }),
530
- activeTab === "ideas" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: ideasArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
531
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F4A1}" }),
532
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No feature requests yet" })
533
- ] }) : ideasArray.slice(0, 5).map((idea) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
563
+ })
564
+ ) }),
565
+ activeTab === "ideas" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { maxWidth: 640 }, children: [
566
+ !showIdeaForm ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
567
+ "button",
568
+ {
569
+ onClick: () => setShowIdeaForm(true),
570
+ style: {
571
+ display: "flex",
572
+ alignItems: "center",
573
+ justifyContent: "center",
574
+ gap: 8,
575
+ width: "100%",
576
+ padding: "12px 16px",
577
+ marginBottom: 20,
578
+ borderRadius: 8,
579
+ border: `1px dashed ${isLight ? "#d4d4d8" : "#3f3f46"}`,
580
+ background: "transparent",
581
+ color: isLight ? "#71717a" : "#a1a1aa",
582
+ fontSize: 14,
583
+ fontWeight: 500,
584
+ cursor: "pointer",
585
+ transition: "all 150ms"
586
+ },
587
+ onMouseEnter: (e) => {
588
+ e.currentTarget.style.borderColor = isLight ? "#a1a1aa" : "#71717a";
589
+ e.currentTarget.style.color = isLight ? "#52525b" : "#d4d4d8";
590
+ },
591
+ onMouseLeave: (e) => {
592
+ e.currentTarget.style.borderColor = isLight ? "#d4d4d8" : "#3f3f46";
593
+ e.currentTarget.style.color = isLight ? "#71717a" : "#a1a1aa";
594
+ },
595
+ children: [
596
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 18 }, children: "\u{1F4A1}" }),
597
+ "Suggest a feature"
598
+ ]
599
+ }
600
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
601
+ "div",
602
+ {
603
+ style: {
604
+ padding: 16,
605
+ marginBottom: 20,
606
+ borderRadius: 8,
607
+ background: isLight ? "#f5f5f5" : "#151515",
608
+ border: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`
609
+ },
610
+ children: [
611
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
612
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: "Suggest a Feature" }),
613
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
614
+ "button",
615
+ {
616
+ onClick: () => {
617
+ setShowIdeaForm(false);
618
+ setIdeaSubmitMessage(null);
619
+ },
620
+ style: {
621
+ background: "transparent",
622
+ border: "none",
623
+ color: isLight ? "#71717a" : "#a1a1aa",
624
+ cursor: "pointer",
625
+ fontSize: 18
626
+ },
627
+ children: "\xD7"
628
+ }
629
+ )
630
+ ] }),
631
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
632
+ "input",
633
+ {
634
+ type: "text",
635
+ value: ideaTitle,
636
+ onChange: (e) => setIdeaTitle(e.target.value),
637
+ placeholder: "Feature title *",
638
+ style: {
639
+ width: "100%",
640
+ padding: "10px 12px",
641
+ marginBottom: 8,
642
+ borderRadius: 6,
643
+ border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
644
+ background: isLight ? "#fff" : "#0a0a0a",
645
+ color: isLight ? "#18181b" : "#fff",
646
+ fontSize: 14,
647
+ outline: "none",
648
+ boxSizing: "border-box"
649
+ }
650
+ }
651
+ ),
652
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
653
+ "textarea",
654
+ {
655
+ value: ideaDescription,
656
+ onChange: (e) => setIdeaDescription(e.target.value),
657
+ placeholder: "Describe your idea...",
658
+ rows: 3,
659
+ style: {
660
+ width: "100%",
661
+ padding: "10px 12px",
662
+ marginBottom: 8,
663
+ borderRadius: 6,
664
+ border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
665
+ background: isLight ? "#fff" : "#0a0a0a",
666
+ color: isLight ? "#18181b" : "#fff",
667
+ fontSize: 14,
668
+ outline: "none",
669
+ resize: "none",
670
+ boxSizing: "border-box"
671
+ }
672
+ }
673
+ ),
674
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 12 }, children: [
675
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
676
+ "input",
677
+ {
678
+ type: "text",
679
+ value: ideaAuthorName,
680
+ onChange: (e) => setIdeaAuthorName(e.target.value),
681
+ placeholder: "Name (optional)",
682
+ style: {
683
+ width: "100%",
684
+ padding: "8px 12px",
685
+ borderRadius: 6,
686
+ border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
687
+ background: isLight ? "#fff" : "#0a0a0a",
688
+ color: isLight ? "#18181b" : "#fff",
689
+ fontSize: 13,
690
+ outline: "none",
691
+ boxSizing: "border-box"
692
+ }
693
+ }
694
+ ),
695
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
696
+ "input",
697
+ {
698
+ type: "email",
699
+ value: ideaAuthorEmail,
700
+ onChange: (e) => setIdeaAuthorEmail(e.target.value),
701
+ placeholder: "Email (optional)",
702
+ style: {
703
+ width: "100%",
704
+ padding: "8px 12px",
705
+ borderRadius: 6,
706
+ border: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
707
+ background: isLight ? "#fff" : "#0a0a0a",
708
+ color: isLight ? "#18181b" : "#fff",
709
+ fontSize: 13,
710
+ outline: "none",
711
+ boxSizing: "border-box"
712
+ }
713
+ }
714
+ )
715
+ ] }),
716
+ ideaSubmitMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
717
+ padding: "8px 12px",
718
+ marginBottom: 12,
719
+ borderRadius: 6,
720
+ background: ideaSubmitMessage.type === "success" ? isLight ? "#dcfce7" : "#14532d" : isLight ? "#fee2e2" : "#450a0a",
721
+ color: ideaSubmitMessage.type === "success" ? isLight ? "#166534" : "#86efac" : isLight ? "#dc2626" : "#fca5a5",
722
+ fontSize: 13
723
+ }, children: ideaSubmitMessage.text }),
724
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
725
+ "button",
726
+ {
727
+ onClick: submitIdea,
728
+ disabled: submittingIdea || !ideaTitle.trim(),
729
+ style: {
730
+ width: "100%",
731
+ padding: "10px 16px",
732
+ borderRadius: 6,
733
+ border: "none",
734
+ background: "#22c55e",
735
+ color: "#fff",
736
+ fontSize: 14,
737
+ fontWeight: 500,
738
+ cursor: submittingIdea || !ideaTitle.trim() ? "not-allowed" : "pointer",
739
+ opacity: submittingIdea || !ideaTitle.trim() ? 0.6 : 1,
740
+ transition: "opacity 150ms"
741
+ },
742
+ children: submittingIdea ? "Submitting..." : "Submit Idea"
743
+ }
744
+ )
745
+ ]
746
+ }
747
+ ),
748
+ ideasArray.length === 0 && !showIdeaForm ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 60, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
749
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 48, marginBottom: 12 }, children: "\u{1F4A1}" }),
750
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 16 }, children: "No feature requests yet" }),
751
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 14, marginTop: 8 }, children: "Be the first to suggest one!" })
752
+ ] }) : ideasArray.map((idea) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
534
753
  "div",
535
754
  {
536
755
  style: {
537
- padding: 10,
538
- marginBottom: 6,
539
- borderRadius: 6,
540
- background: isLight ? "#f5f5f5" : "#252525",
756
+ padding: 16,
757
+ marginBottom: 12,
758
+ borderRadius: 8,
759
+ background: isLight ? "#f5f5f5" : "#151515",
760
+ border: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`,
541
761
  display: "flex",
542
762
  alignItems: "flex-start",
543
- gap: 10
763
+ gap: 16
544
764
  },
545
765
  children: [
546
766
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -550,77 +770,80 @@ function VersionPill({
550
770
  display: "flex",
551
771
  flexDirection: "column",
552
772
  alignItems: "center",
553
- padding: "3px 6px",
554
- borderRadius: 4,
555
- background: isLight ? "#fff" : "#1a1a1a",
556
- minWidth: 32
773
+ padding: "8px 12px",
774
+ borderRadius: 6,
775
+ background: isLight ? "#fff" : "#0a0a0a",
776
+ minWidth: 50
557
777
  },
558
778
  children: [
559
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: idea.votes }),
560
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 9, color: isLight ? "#71717a" : "#71717a" }, children: "votes" })
779
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 18, fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: idea.votes }),
780
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a" }, children: "votes" })
561
781
  ]
562
782
  }
563
783
  ),
564
784
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
565
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, fontWeight: 500, color: isLight ? "#18181b" : "#fff", marginBottom: 2 }, children: idea.title }),
566
- idea.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: idea.description.slice(0, 80) })
785
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 16, fontWeight: 500, color: isLight ? "#18181b" : "#fff", marginBottom: 4 }, children: idea.title }),
786
+ idea.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 14, color: isLight ? "#71717a" : "#71717a", lineHeight: 1.5 }, children: idea.description })
567
787
  ] })
568
788
  ]
569
789
  },
570
790
  idea.id
571
- )) })
572
- ] }),
573
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
574
- "div",
575
- {
576
- style: {
577
- flexShrink: 0,
578
- padding: "10px 12px",
579
- borderTop: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
580
- background: isLight ? "#fafafa" : "#151515",
581
- display: "flex",
582
- alignItems: "center",
583
- justifyContent: "space-between"
584
- },
585
- children: [
586
- showBranding && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
587
- "a",
588
- {
589
- href: "https://versionpill.com",
590
- target: "_blank",
591
- rel: "noopener noreferrer",
592
- style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", textDecoration: "none" },
593
- children: "Powered by Version Pill"
594
- }
595
- ),
596
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
597
- "a",
598
- {
599
- href: `${baseUrl}/${projectId}/${activeTab === "ideas" ? "feature-requests" : activeTab}`,
600
- target: "_blank",
601
- rel: "noopener noreferrer",
602
- style: {
603
- padding: "5px 10px",
604
- fontSize: 11,
605
- fontWeight: 500,
606
- borderRadius: 5,
607
- background: "#22c55e",
608
- color: "#fff",
609
- textDecoration: "none",
610
- transition: "background 150ms"
611
- },
612
- onMouseEnter: (e) => e.currentTarget.style.background = "#16a34a",
613
- onMouseLeave: (e) => e.currentTarget.style.background = "#22c55e",
614
- children: "View All \u2192"
615
- }
616
- )
617
- ]
618
- }
619
- )
620
- ]
621
- }
622
- )
623
- ] })
791
+ ))
792
+ ] })
793
+ ] }),
794
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
795
+ "div",
796
+ {
797
+ style: {
798
+ flexShrink: 0,
799
+ padding: "16px 24px",
800
+ borderTop: `1px solid ${isLight ? "#e5e5e5" : "#1f1f1f"}`,
801
+ display: "flex",
802
+ alignItems: "center",
803
+ justifyContent: "space-between"
804
+ },
805
+ children: [
806
+ showBranding && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
807
+ "a",
808
+ {
809
+ href: "https://versionpill.com",
810
+ target: "_blank",
811
+ rel: "noopener noreferrer",
812
+ style: { fontSize: 12, color: isLight ? "#a1a1aa" : "#525252", textDecoration: "none" },
813
+ children: "Powered by Version Pill"
814
+ }
815
+ ),
816
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
817
+ "a",
818
+ {
819
+ href: `${baseUrl}/${projectId}/${activeTab === "ideas" ? "feature-requests" : activeTab}`,
820
+ target: "_blank",
821
+ rel: "noopener noreferrer",
822
+ style: {
823
+ padding: "10px 20px",
824
+ fontSize: 14,
825
+ fontWeight: 500,
826
+ borderRadius: 8,
827
+ background: "#22c55e",
828
+ color: "#fff",
829
+ textDecoration: "none",
830
+ transition: "background 150ms"
831
+ },
832
+ onMouseEnter: (e) => e.currentTarget.style.background = "#16a34a",
833
+ onMouseLeave: (e) => e.currentTarget.style.background = "#22c55e",
834
+ children: [
835
+ "View Full ",
836
+ activeTab === "changelog" ? "Changelog" : activeTab === "roadmap" ? "Roadmap" : "Ideas",
837
+ " \u2192"
838
+ ]
839
+ }
840
+ )
841
+ ]
842
+ }
843
+ )
844
+ ]
845
+ }
846
+ ) })
624
847
  ] });
625
848
  }
626
849
  function VersionBadge({