Add bookmark support and enhance share dialog
- Add bookmark button to file header and context menu - Implement toggle bookmark API call with toast notification - Redesign share dialog to show existing shares with revocation - Add expiration options when creating a new share - Add CSS styles for share action buttons
This commit is contained in:
parent
20f9bad9c0
commit
b1fcc080e5
129
frontend/app.js
129
frontend/app.js
@ -3269,6 +3269,16 @@
|
||||
const shareBtn = el("button", { class: "btn-action", title: "Partager ce document" }, [icon("share-2", 14), document.createTextNode("Partager")]);
|
||||
shareBtn.addEventListener("click", () => openShareDialog(data.vault, data.path));
|
||||
|
||||
// Bookmark button
|
||||
const bookmarkBtn = el("button", { class: "btn-action", title: "Ajouter/Retirer des bookmarks" }, [icon("bookmark-plus", 14), document.createTextNode("Bookmark")]);
|
||||
bookmarkBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
const res = await api("/api/bookmarks/toggle", { method: "POST", body: JSON.stringify({ vault: data.vault, path: data.path, title: data.title }) });
|
||||
showToast(res.bookmarked ? "Ajouté aux bookmarks" : "Retiré des bookmarks", "success");
|
||||
if (typeof DashboardBookmarkWidget !== "undefined") DashboardBookmarkWidget.load();
|
||||
} catch (err) { showToast("Erreur: " + err.message, "error"); }
|
||||
});
|
||||
|
||||
// Frontmatter — Accent Card
|
||||
let fmSection = null;
|
||||
if (data.frontmatter && Object.keys(data.frontmatter).length > 0) {
|
||||
@ -3309,7 +3319,7 @@
|
||||
// Assemble
|
||||
area.innerHTML = "";
|
||||
area.appendChild(breadcrumb);
|
||||
area.appendChild(el("div", { class: "file-header" }, [el("div", { class: "file-title" }, [document.createTextNode(data.title)]), tagsDiv, el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn, openNewWindowBtn, tocBtn, shareBtn])]));
|
||||
area.appendChild(el("div", { class: "file-header" }, [el("div", { class: "file-title" }, [document.createTextNode(data.title)]), tagsDiv, el("div", { class: "file-actions" }, [copyBtn, sourceBtn, downloadBtn, editBtn, openNewWindowBtn, tocBtn, shareBtn, bookmarkBtn])]));
|
||||
if (fmSection) area.appendChild(fmSection);
|
||||
area.appendChild(mdDiv);
|
||||
area.appendChild(rawDiv);
|
||||
@ -4540,32 +4550,90 @@
|
||||
}));
|
||||
}
|
||||
|
||||
// ── Share Dialog ──
|
||||
// ── Share Dialog (professional) ──
|
||||
async function openShareDialog(vault, path) {
|
||||
// First check if already shared
|
||||
let existingShare = null;
|
||||
try {
|
||||
const share = await api(`/api/share/${encodeURIComponent(vault)}`, { method: "POST", body: JSON.stringify({ path }) });
|
||||
const url = window.location.origin + share.url;
|
||||
const div = document.createElement("div");
|
||||
div.className = "share-dialog-overlay";
|
||||
div.innerHTML = `
|
||||
<div class="share-dialog">
|
||||
<h3>📤 Lien de partage</h3>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:8px">${escapeHtml(vault)}/${escapeHtml(path)}</p>
|
||||
<input type="text" class="share-url-input" value="${url}" readonly onclick="this.select()">
|
||||
<div class="share-dialog-actions">
|
||||
<button class="share-copy-btn">📋 Copier</button>
|
||||
<button class="share-close-btn">Fermer</button>
|
||||
</div>
|
||||
</div>`;
|
||||
document.body.appendChild(div);
|
||||
div.querySelector(".share-copy-btn").addEventListener("click", async () => {
|
||||
await navigator.clipboard.writeText(url);
|
||||
showToast("Lien copié !", "success");
|
||||
div.remove();
|
||||
});
|
||||
const shares = await api("/api/shares");
|
||||
existingShare = shares.find(s => s.vault === vault && s.path === path);
|
||||
} catch (e) { /* ignore */ }
|
||||
|
||||
const div = document.createElement("div");
|
||||
div.className = "share-dialog-overlay";
|
||||
|
||||
const renderContent = () => {
|
||||
if (existingShare) {
|
||||
const url = window.location.origin + existingShare.url;
|
||||
const expiresInfo = existingShare.expires_at
|
||||
? `<p style="font-size:0.75rem;color:var(--text-muted)">Expire le ${new Date(existingShare.expires_at).toLocaleDateString("fr-FR")}</p>`
|
||||
: '<p style="font-size:0.75rem;color:var(--text-muted)">Sans expiration</p>';
|
||||
div.innerHTML = `
|
||||
<div class="share-dialog">
|
||||
<h3>📤 Document partagé</h3>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:4px">${escapeHtml(vault)}/${escapeHtml(path)}</p>
|
||||
${expiresInfo}
|
||||
<p style="font-size:0.75rem;color:var(--text-muted);margin-bottom:8px">${existingShare.access_count} vue(s)</p>
|
||||
<input type="text" class="share-url-input" value="${url}" readonly onclick="this.select()">
|
||||
<div class="share-dialog-actions">
|
||||
<button class="share-copy-btn">📋 Copier le lien</button>
|
||||
<button class="share-revoke-btn">🗑 Révoquer</button>
|
||||
<button class="share-close-btn">Fermer</button>
|
||||
</div>
|
||||
</div>`;
|
||||
div.querySelector(".share-copy-btn").addEventListener("click", async () => {
|
||||
await navigator.clipboard.writeText(url);
|
||||
showToast("Lien copié !", "success");
|
||||
div.remove();
|
||||
});
|
||||
div.querySelector(".share-revoke-btn").addEventListener("click", async () => {
|
||||
try {
|
||||
await api(`/api/share/${existingShare.id}`, { method: "DELETE" });
|
||||
showToast("Partage révoqué", "success");
|
||||
existingShare = null;
|
||||
renderContent();
|
||||
} catch (err) { showToast("Erreur: " + err.message, "error"); }
|
||||
});
|
||||
} else {
|
||||
div.innerHTML = `
|
||||
<div class="share-dialog">
|
||||
<h3>📤 Partager ce document</h3>
|
||||
<p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:12px">${escapeHtml(vault)}/${escapeHtml(path)}</p>
|
||||
<p style="font-size:0.8rem;margin-bottom:8px">Ce lien sera accessible <strong>publiquement, sans authentification</strong>.</p>
|
||||
<label style="font-size:0.8rem;display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
Expiration :
|
||||
<select id="share-expiry" style="padding:4px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-secondary);color:var(--text-primary);font-size:0.8rem">
|
||||
<option value="">Jamais</option>
|
||||
<option value="1">1 heure</option>
|
||||
<option value="24">24 heures</option>
|
||||
<option value="168">7 jours</option>
|
||||
<option value="720">30 jours</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="share-dialog-actions">
|
||||
<button class="share-create-btn">🔗 Créer le lien</button>
|
||||
<button class="share-close-btn">Fermer</button>
|
||||
</div>
|
||||
</div>`;
|
||||
div.querySelector(".share-create-btn").addEventListener("click", async () => {
|
||||
try {
|
||||
const expiry = document.getElementById("share-expiry")?.value;
|
||||
const share = await api(`/api/share/${encodeURIComponent(vault)}`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ path, expires_in_hours: expiry ? parseInt(expiry) : null }),
|
||||
});
|
||||
existingShare = share;
|
||||
renderContent();
|
||||
showToast("Lien créé !", "success");
|
||||
} catch (err) { showToast("Erreur: " + err.message, "error"); }
|
||||
});
|
||||
}
|
||||
div.querySelector(".share-close-btn").addEventListener("click", () => div.remove());
|
||||
div.addEventListener("click", (e) => { if (e.target === div) div.remove(); });
|
||||
} catch (err) { showToast("Erreur: " + err.message, "error"); }
|
||||
};
|
||||
|
||||
renderContent();
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
|
||||
function renderConfigFilters() {
|
||||
@ -6471,6 +6539,8 @@
|
||||
} else if (type === 'file') {
|
||||
this._addItem('edit', 'Renommer', () => this._renameItem(), isReadonly);
|
||||
this._addItem('trash-2', 'Supprimer', () => this._deleteFile(), isReadonly);
|
||||
this._addSeparator();
|
||||
this._addItem('bookmark-plus', 'Ajouter aux bookmarks', () => this._toggleBookmark(), false);
|
||||
}
|
||||
|
||||
this._menu.classList.add('active');
|
||||
@ -6582,6 +6652,19 @@
|
||||
showToast('Erreur lors de la copie', 'error');
|
||||
}
|
||||
document.body.removeChild(textarea);
|
||||
},
|
||||
|
||||
async _toggleBookmark() {
|
||||
try {
|
||||
const data = await api("/api/bookmarks/toggle", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ vault: this._targetVault, path: this._targetPath, title: this._targetPath.split("/").pop() }),
|
||||
});
|
||||
showToast(data.bookmarked ? "Ajouté aux bookmarks" : "Retiré des bookmarks", "success");
|
||||
if (typeof DashboardBookmarkWidget !== "undefined" && DashboardBookmarkWidget.load) {
|
||||
DashboardBookmarkWidget.load();
|
||||
}
|
||||
} catch (err) { showToast("Erreur: " + err.message, "error"); }
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -5744,6 +5744,24 @@ body.popup-mode .content-area {
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.share-create-btn {
|
||||
padding: 6px 16px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.share-revoke-btn {
|
||||
padding: 6px 16px;
|
||||
background: none;
|
||||
color: var(--text-error);
|
||||
border: 1px solid var(--text-error);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ── Enhanced Search Bar Toggles ── */
|
||||
.search-actions .tog {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user