96 lines
3.2 KiB
JavaScript
96 lines
3.2 KiB
JavaScript
import { state } from "../store.js";
|
|
import { t } from "../i18n.js";
|
|
import { iconMarkup, QUICK_ACCESS_ICONS } from "../icons.js";
|
|
import { showContextMenu } from "./contextMenu.js";
|
|
import { navigateLocal, removeBookmark } from "../fsActions.js";
|
|
|
|
let lastSig = null;
|
|
|
|
function item(icon, label, active, onClick) {
|
|
const row = document.createElement("div");
|
|
row.className = `row ${active ? "active" : ""}`;
|
|
row.innerHTML = `<span class="icon">${iconMarkup(icon, 15)}</span><span style="margin-left:8px;font-size:12.5px">${label}</span>`;
|
|
row.addEventListener("click", onClick);
|
|
return row;
|
|
}
|
|
|
|
export function renderSidebar(container) {
|
|
container.innerHTML = "";
|
|
|
|
const logo = document.createElement("div");
|
|
logo.className = "sidebar-logo";
|
|
logo.innerHTML = `<span class="sidebar-logo-badge">W</span><span class="sidebar-logo-text">Wherry</span>`;
|
|
container.appendChild(logo);
|
|
|
|
const qaTitle = document.createElement("div");
|
|
qaTitle.className = "sidebar-section-title";
|
|
qaTitle.textContent = t("panels.localLabel");
|
|
container.appendChild(qaTitle);
|
|
|
|
for (const qa of state.sidebar.quickAccess) {
|
|
if (!qa.path) continue;
|
|
const active = state.local.path === qa.path;
|
|
container.appendChild(
|
|
item(QUICK_ACCESS_ICONS[qa.name] ?? "folder", qa.name, active, () => navigateLocal(qa.path)),
|
|
);
|
|
}
|
|
|
|
const divider1 = document.createElement("div");
|
|
divider1.className = "sidebar-divider";
|
|
container.appendChild(divider1);
|
|
|
|
const drivesTitle = document.createElement("div");
|
|
drivesTitle.className = "sidebar-section-title";
|
|
drivesTitle.textContent = t("panels.sidebarDrives");
|
|
container.appendChild(drivesTitle);
|
|
|
|
container.appendChild(
|
|
item("ssd", t("panels.sidebarRoot"), state.local.path === "/", () => navigateLocal("/")),
|
|
);
|
|
|
|
if (state.sidebar.bookmarks.length > 0) {
|
|
const divider2 = document.createElement("div");
|
|
divider2.className = "sidebar-divider";
|
|
container.appendChild(divider2);
|
|
|
|
const bmTitle = document.createElement("div");
|
|
bmTitle.className = "sidebar-section-title";
|
|
bmTitle.textContent = t("panels.sidebarBookmarks");
|
|
container.appendChild(bmTitle);
|
|
|
|
for (const bm of state.sidebar.bookmarks) {
|
|
const row = item("star", bm.name, state.local.path === bm.path, () => navigateLocal(bm.path));
|
|
row.addEventListener("contextmenu", (e) => {
|
|
e.preventDefault();
|
|
showContextMenu(e.clientX, e.clientY, [
|
|
{ label: t("panels.sidebarRemoveBookmark"), icon: "trash", danger: true, onClick: () => removeBookmark(bm.id) },
|
|
]);
|
|
});
|
|
container.appendChild(row);
|
|
}
|
|
}
|
|
|
|
const spacer = document.createElement("div");
|
|
spacer.className = "sidebar-spacer";
|
|
container.appendChild(spacer);
|
|
|
|
const footer = document.createElement("div");
|
|
footer.className = "sidebar-footer";
|
|
footer.textContent = "Wherry v0.1";
|
|
container.appendChild(footer);
|
|
|
|
lastSig = computeSig();
|
|
}
|
|
|
|
function computeSig() {
|
|
return JSON.stringify([
|
|
state.local.path,
|
|
state.sidebar.bookmarks.map((b) => `${b.id}:${b.path}`),
|
|
state.sidebar.quickAccess.map((q) => q.path),
|
|
]);
|
|
}
|
|
|
|
export function updateSidebarIfNeeded(container) {
|
|
if (computeSig() === lastSig) return;
|
|
renderSidebar(container);
|
|
}
|