mirror of
https://github.com/tdurieux/anonymous_github.git
synced 2026-11-14 00:07:00 +01:00
Thomas DurieuxandClaude Opus 5.5
c044b83541
The UI was uneven: the home page looked finished, but app pages used three different display typefaces, the anonymize flow changed frame between steps, and the dashboard, explorer and admin screens each had their own controls, status colours and edge-case handling. Make every screen follow one system: shared page header, grid, buttons, filters and status colours; a repository picker and step trail on anonymize; a "What reviewers will see" preview of the actual reviewer page; consistent file headers and viewers for every file type; truthful admin charts and tables. Fold the accumulated override blocks back into style.css (22% smaller, no visual change). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
68 lines
3.3 KiB
JavaScript
68 lines
3.3 KiB
JavaScript
import { computed } from "vue";
|
|
|
|
// Local state formerly initialized by templates; list aliases are computed.
|
|
export function initializeTemplate(name, state) {
|
|
if (name === "partials/explorer.htm") {
|
|
state.sidebarCollapsed = window.matchMedia?.("(max-width: 767px)").matches || false;
|
|
state.sidebarHidden = false;
|
|
state.dirExpanded = false;
|
|
state.moreOpen = false;
|
|
state.tocOpen = false;
|
|
state.gotoOpen = false;
|
|
state.gotoValue = "";
|
|
state.gotoError = "";
|
|
state.mdFindOpen = false;
|
|
state.mdFindQuery = "";
|
|
state.mdFindTotal = 0;
|
|
state.mdFindIndex = 0;
|
|
state.mdFindCase = false;
|
|
state.accountOpen = false;
|
|
state.helpOpen = false;
|
|
state.sidebarWidth = Math.min(520, Math.max(220, Number(localStorage.getItem("sidebarWidth")) || (window.innerWidth >= 1280 ? 320 : 280)));
|
|
// Shared with the app bar so the brand column lines up with the file tree.
|
|
document.documentElement.style.setProperty("--sidebar-w", state.sidebarWidth + "px");
|
|
state.startSidebarResize = (event) => {
|
|
event.preventDefault();
|
|
const startX = event.clientX;
|
|
const startWidth = state.sidebarWidth;
|
|
const move = (e) => {
|
|
state.sidebarWidth = Math.min(520, Math.max(220, startWidth + e.clientX - startX));
|
|
document.documentElement.style.setProperty("--sidebar-w", state.sidebarWidth + "px");
|
|
};
|
|
const up = () => {
|
|
window.removeEventListener("pointermove", move);
|
|
window.removeEventListener("pointerup", up);
|
|
document.body.classList.remove("is-resizing");
|
|
localStorage.setItem("sidebarWidth", String(state.sidebarWidth));
|
|
};
|
|
document.body.classList.add("is-resizing");
|
|
window.addEventListener("pointermove", move);
|
|
window.addEventListener("pointerup", up);
|
|
};
|
|
}
|
|
if (name === "partials/anonymize.htm") {
|
|
state.prTabState = { active: state.options.diff ? "diff" : "comments" };
|
|
state.watchGroup(["options.diff", "options.comments"], () => {
|
|
if (!state.options[state.prTabState.active]) state.prTabState.active = state.options.diff ? "diff" : state.options.comments ? "comments" : null;
|
|
});
|
|
}
|
|
if (name === "partials/gist.htm") state.tabState = { active: state.details?.files ? "files" : "comments" };
|
|
if (["partials/conferences.htm", "partials/conference.htm"].includes(name)) {
|
|
state.statusLabels = { ready: "Ready", expired: "Expired", removed: "Removed" };
|
|
}
|
|
const lists = {
|
|
"partials/dashboard.htm": ["filteredItems", () => state.items, "itemFilter"],
|
|
"partials/conferences.htm": ["filteredConferences", () => state.conferences, "conferenceFilter"],
|
|
"partials/conference.htm": ["filteredRepositories", () => state.conference?.repositories, "repoFiler"],
|
|
"partials/admin/repositories.htm": ["filteredRepositories", () => state.repositories, "repoFiler"],
|
|
"partials/admin/user.htm": ["filteredRepositories", () => state.repositories, "repoFiler"],
|
|
"partials/admin/users.htm": ["filteredUsers", () => state.users, "userFiler"],
|
|
"partials/admin/conferences.htm": ["filteredConferences", () => state.conferences],
|
|
};
|
|
const list = lists[name];
|
|
if (list) {
|
|
const value = computed(() => state.fmt.orderBy(state.fmt.filter(list[1](), state[list[2]]), state.orderBy));
|
|
Object.defineProperty(state, list[0], { configurable: true, get: () => value.value });
|
|
}
|
|
}
|