`;
for (const msg of pin.messages) {
const time = new Date(msg.createdAt).toLocaleString(undefined, {
- month: "short",
- day: "numeric",
- hour: "numeric",
- minute: "2-digit",
+ month: "short", day: "numeric", hour: "numeric", minute: "2-digit",
});
html += `
@@ -505,11 +563,11 @@ export class CommentPinManager {
html += `
`;
}
- // Input
+ // Input + link note row
html += `
-
@@ -518,6 +576,13 @@ export class CommentPinManager {
padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 600;
">Send
+ ${!pin.linkedNoteId ? `
+
+
+
+
+ ` : ""}
`;
@@ -534,6 +599,7 @@ export class CommentPinManager {
else if (action === "unresolve") this.unresolvePin(pinId);
else if (action === "delete") this.deletePin(pinId);
else if (action === "remind") this.#createReminder(pinId);
+ else if (action === "unlink-note") this.unlinkNote(pinId);
});
});
@@ -562,18 +628,38 @@ export class CommentPinManager {
// @mention autocomplete
input.addEventListener("input", () => this.#handleMentionInput(input));
+ // Link note button
+ const linkBtn = this.#popover.querySelector('[data-action="link-note"]') as HTMLButtonElement | null;
+ const notePicker = this.#popover.querySelector(".cp-note-picker") as HTMLElement | null;
+ if (linkBtn && notePicker) {
+ linkBtn.addEventListener("click", async () => {
+ if (notePicker.style.display !== "none") {
+ notePicker.style.display = "none";
+ return;
+ }
+ notePicker.innerHTML = `
Loading notes...
`;
+ notePicker.style.display = "block";
+ const notes = await this.#fetchNotes();
+ if (notes.length === 0) {
+ notePicker.innerHTML = `
No notes in this space
`;
+ return;
+ }
+ notePicker.innerHTML = "";
+ for (const note of notes) {
+ const item = document.createElement("div");
+ item.className = "cp-note-item";
+ item.textContent = note.title || "Untitled";
+ item.addEventListener("click", () => {
+ this.linkNote(pinId, note.id, note.title || "Untitled");
+ });
+ notePicker.appendChild(item);
+ }
+ });
+ }
+
if (focusInput) {
requestAnimationFrame(() => input.focus());
}
-
- // Style action buttons
- const style = document.createElement("style");
- style.textContent = `
- .cp-action { background: none; border: 1px solid #444; border-radius: 4px;
- padding: 2px 6px; cursor: pointer; color: #ccc; font-size: 13px; }
- .cp-action:hover { background: #333; }
- `;
- this.#popover.prepend(style);
}
// ── @Mention Autocomplete ──
@@ -594,6 +680,24 @@ export class CommentPinManager {
}
}
+ async #fetchNotes(): Promise
{
+ if (this.#notes) return this.#notes;
+ try {
+ const sess = JSON.parse(localStorage.getItem("encryptid_session") || "{}");
+ const res = await fetch(`/${this.#spaceSlug}/rnotes/api/notes?limit=50`, {
+ headers: sess?.accessToken ? { Authorization: `Bearer ${sess.accessToken}` } : {},
+ });
+ if (!res.ok) return [];
+ const data = await res.json();
+ this.#notes = (data.notes || []).map((n: any) => ({
+ id: n.id, title: n.title, type: n.type, updated_at: n.updated_at,
+ }));
+ return this.#notes!;
+ } catch {
+ return [];
+ }
+ }
+
async #handleMentionInput(input: HTMLInputElement) {
const val = input.value;
const cursorPos = input.selectionStart || 0;
diff --git a/shared/comment-pin-types.ts b/shared/comment-pin-types.ts
index 0d3158d..e1c2d39 100644
--- a/shared/comment-pin-types.ts
+++ b/shared/comment-pin-types.ts
@@ -27,4 +27,6 @@ export interface CommentPinData {
createdAt: number;
createdBy: string; // DID
createdByName: string;
+ linkedNoteId?: string; // rNotes note ID
+ linkedNoteTitle?: string; // cached title for display
}