Andrew Zambazos
19f7631263
Introduce a tabbed repository modal with new styling and grouped lists. Adds CSS for modal tabs and repo-owner group/divider visuals. In JS, add activeReposTab state, helper functions to infer repo owners and match remotes, and utilities to group server and local repos. Replace flat lists with serverRepoListTemplate/recentLocalReposTemplate and group local scan results; update reposModalContent to render tabbed local/server panels and bind tab click events.
2814 lines
108 KiB
JavaScript
2814 lines
108 KiB
JavaScript
import { fetchCurrentUser, fetchRepoBranches, fetchRepoContents, fetchRepositories } from "./gitea-api.js";
|
|
import { getActiveServer, getState, setSettings, updateSettings, addRecentRepo } from "./state.js";
|
|
import {
|
|
browseApplication,
|
|
browseDirectory,
|
|
checkoutBranch,
|
|
commitChanges,
|
|
createBranch,
|
|
deleteBranch,
|
|
getCommitDetail,
|
|
getCommitHistory,
|
|
getFileDiff,
|
|
getRepositorySyncStatus,
|
|
getWorkingTreeStatus,
|
|
listLocalRepoBranches,
|
|
listLocalRepoTree,
|
|
openInExternalEditor,
|
|
openInFileExplorer,
|
|
readLocalRepoFile,
|
|
renameBranch,
|
|
runGitBranch,
|
|
runGitClone,
|
|
runGitFetch,
|
|
runGitPull,
|
|
runGitPublishBranch,
|
|
runGitPush,
|
|
runGitSync,
|
|
runGitStatus,
|
|
scanInstalledIdes,
|
|
scanLocalRepos,
|
|
testGiteaConnection,
|
|
} from "./tauri-api.js";
|
|
|
|
const appRoot = document.getElementById("app");
|
|
|
|
const mockRepos = [
|
|
{ id: 1, full_name: "alice/portfolio", private: false, clone_url: "https://example.com/portfolio.git", updated_at: "today", owner: { login: "alice", type: "User" } },
|
|
{ id: 2, full_name: "alice/dotfiles", private: true, clone_url: "https://example.com/dotfiles.git", updated_at: "yesterday", owner: { login: "alice", type: "User" } },
|
|
{ id: 3, full_name: "acme-corp/client-ui", private: false, clone_url: "https://example.com/client-ui.git", updated_at: "today", owner: { login: "acme-corp", type: "Organization" } },
|
|
{ id: 4, full_name: "acme-corp/api-server", private: true, clone_url: "https://example.com/api-server.git", updated_at: "3 days ago", owner: { login: "acme-corp", type: "Organization" } },
|
|
{ id: 5, full_name: "oss-collective/toolkit", private: false, clone_url: "https://example.com/toolkit.git", updated_at: "last week", owner: { login: "oss-collective", type: "Organization" } },
|
|
];
|
|
|
|
let repositories = [...mockRepos];
|
|
let currentUserLogin = "";
|
|
let serverTestResult = "";
|
|
let settingsNotice = "";
|
|
let gitOutput = "";
|
|
let activeView = "changes"; // "changes" | "history"
|
|
let activeModal = ""; // "" | "repos" | "clone" | "servers" | "settings" | "viewer"
|
|
let utilityMenuOpen = false;
|
|
let repoOwnerFilter = "all";
|
|
let activeReposTab = "local"; // "local" | "server"
|
|
const maxPreviewBytes = 256 * 1024;
|
|
const defaultRepositoryName = "Gitpub-Desktop";
|
|
const defaultBranchName = "main";
|
|
const DEFAULT_EDITOR_VALUE = "__default_code__";
|
|
const CUSTOM_EDITOR_VALUE = "__custom__";
|
|
|
|
function escapeSvgAttr(value = "") {
|
|
return String(value)
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """);
|
|
}
|
|
|
|
function svgAttrs(attrs = {}) {
|
|
return Object.entries(attrs)
|
|
.filter(([, value]) => value !== undefined && value !== null && value !== false)
|
|
.map(([key, value]) => `${key}="${escapeSvgAttr(value)}"`)
|
|
.join(" ");
|
|
}
|
|
|
|
function lucideIcon(name, { size = 16, className = "", strokeWidth = 2, attrs = {} } = {}) {
|
|
const icon = window.lucide?.icons?.[name];
|
|
if (!icon) return "";
|
|
|
|
const iconAttrs = svgAttrs({
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
width: size,
|
|
height: size,
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
"stroke-width": strokeWidth,
|
|
"stroke-linecap": "round",
|
|
"stroke-linejoin": "round",
|
|
"aria-hidden": "true",
|
|
focusable: "false",
|
|
class: ["gd-lucide-icon", className].filter(Boolean).join(" "),
|
|
...attrs,
|
|
});
|
|
const children = icon.map(([tag, childAttrs]) => `<${tag} ${svgAttrs(childAttrs)} />`).join("");
|
|
return `<svg ${iconAttrs}>${children}</svg>`;
|
|
}
|
|
|
|
const FOLDER_ICON = lucideIcon("Folder", { size: 16, className: "gd-folder-icon" });
|
|
const FILE_ICON = lucideIcon("File", { size: 16, className: "gd-file-icon" });
|
|
const LOCAL_REPO_ICON = lucideIcon("Monitor", { size: 18 });
|
|
const BRANCH_ICON = lucideIcon("GitBranch", { size: 16 });
|
|
const SYNC_ICON = lucideIcon("RefreshCw", { size: 15 });
|
|
const PULL_ICON = lucideIcon("Download", { size: 15 });
|
|
const PUSH_ICON = lucideIcon("Upload", { size: 15 });
|
|
const PUBLISH_ICON = lucideIcon("CloudUpload", { size: 15 });
|
|
const EXPLORER_ICON = lucideIcon("FolderOpen", { size: 15 });
|
|
const EDITOR_ICON = lucideIcon("SquarePen", { size: 15 });
|
|
const WINDOW_MINIMIZE_ICON = lucideIcon("Minus", { size: 12 });
|
|
const WINDOW_MAXIMIZE_ICON = lucideIcon("Square", { size: 12 });
|
|
const WINDOW_CLOSE_ICON = lucideIcon("X", { size: 12 });
|
|
const CHEVRON_DOWN_ICON = lucideIcon("ChevronDown", { size: 10, className: "gd-cell-caret" });
|
|
const MORE_ICON = lucideIcon("Ellipsis", { size: 15 });
|
|
const REFRESH_ICON = lucideIcon("RefreshCw", { size: 14 });
|
|
const REPOSITORY_ICON = lucideIcon("BookOpen", { size: 14 });
|
|
const CLONE_ICON = lucideIcon("GitFork", { size: 14 });
|
|
const SERVER_ICON = lucideIcon("Server", { size: 14 });
|
|
const SETTINGS_ICON = lucideIcon("Settings", { size: 14 });
|
|
const PLUS_ICON = lucideIcon("Plus", { size: 14 });
|
|
const CHECK_ICON = lucideIcon("Check", { size: 13 });
|
|
const EMPTY_DIFF_ICON = lucideIcon("FileDiff", { size: 44, strokeWidth: 1.6 });
|
|
const EMPTY_FILE_ICON = lucideIcon("File", { size: 44, strokeWidth: 1.6 });
|
|
const EMPTY_REPO_ICON = lucideIcon("FolderGit2", { size: 44, strokeWidth: 1.6 });
|
|
|
|
function currentPlatform() {
|
|
const platform = navigator.userAgentData?.platform || navigator.platform || "";
|
|
const userAgent = navigator.userAgent || "";
|
|
const value = `${platform} ${userAgent}`.toLowerCase();
|
|
|
|
if (value.includes("mac")) return "macos";
|
|
if (value.includes("win")) return "windows";
|
|
return "linux";
|
|
}
|
|
|
|
function applyPlatformChrome() {
|
|
appRoot.dataset.platform = currentPlatform();
|
|
}
|
|
|
|
function currentTauriWindow() {
|
|
const tauriWindow = window.__TAURI__?.window;
|
|
if (tauriWindow?.getCurrentWindow) {
|
|
return tauriWindow.getCurrentWindow();
|
|
}
|
|
return tauriWindow?.appWindow || null;
|
|
}
|
|
|
|
async function handleWindowAction(action) {
|
|
const appWindow = currentTauriWindow();
|
|
if (!appWindow) {
|
|
console.warn("Tauri window API not available");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (action === "minimize") {
|
|
await appWindow.minimize();
|
|
} else if (action === "maximize") {
|
|
const isMaximized = await appWindow.isMaximized();
|
|
if (isMaximized) {
|
|
await appWindow.unmaximize();
|
|
} else {
|
|
await appWindow.maximize();
|
|
}
|
|
} else if (action === "close") {
|
|
await appWindow.close();
|
|
}
|
|
} catch (error) {
|
|
console.error(`Unable to ${action} window:`, error);
|
|
}
|
|
}
|
|
|
|
async function startWindowDrag() {
|
|
const appWindow = currentTauriWindow();
|
|
if (!appWindow) return;
|
|
|
|
try {
|
|
await appWindow.startDragging();
|
|
} catch (error) {
|
|
console.error("Unable to start window drag:", error);
|
|
}
|
|
}
|
|
|
|
function uid() {
|
|
return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
|
|
}
|
|
|
|
function escapeHtml(value = "") {
|
|
return value
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """);
|
|
}
|
|
|
|
function formatBytes(value) {
|
|
if (!Number.isFinite(value)) return "";
|
|
if (value < 1024) return `${value} B`;
|
|
if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
|
|
return `${(value / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
function parentPath(path = "") {
|
|
const parts = path.split("/").filter(Boolean);
|
|
parts.pop();
|
|
return parts.join("/");
|
|
}
|
|
|
|
function repoNameFromPath(path = "") {
|
|
return path.split(/[/\\]/).filter(Boolean).pop() || path;
|
|
}
|
|
|
|
function parentFolderName(path = "") {
|
|
const parts = path.split(/[/\\]/).filter(Boolean);
|
|
return parts.length > 1 ? parts[parts.length - 2] : "Local";
|
|
}
|
|
|
|
function repoNameFromUrl(url = "") {
|
|
const cleanUrl = url.trim().split(/[?#]/)[0].replace(/\/+$/, "").replace(/\.git$/i, "");
|
|
return cleanUrl.split(/[/\\:]/).filter(Boolean).pop() || "";
|
|
}
|
|
|
|
function joinDirectoryPath(parent = "", child = "") {
|
|
if (!parent || !child) return parent || child;
|
|
const separator = parent.includes("\\") ? "\\" : "/";
|
|
return `${parent.replace(/[\\/]+$/, "")}${separator}${child}`;
|
|
}
|
|
|
|
function currentRepositoryName() {
|
|
return getState().selectedRepoName || defaultRepositoryName;
|
|
}
|
|
|
|
function currentBranchName() {
|
|
return getState().workingTree.branch || getState().viewer.branch || defaultBranchName;
|
|
}
|
|
|
|
function normalizeRemoteUrl(value = "") {
|
|
return value.trim().replace(/\/+$/, "").replace(/\.git$/i, "").toLowerCase();
|
|
}
|
|
|
|
function serverRepoRemoteUrls() {
|
|
const urls = repositories.flatMap((repo) => [
|
|
repo.clone_url,
|
|
repo.ssh_url,
|
|
repo.html_url,
|
|
repo.original_url,
|
|
]);
|
|
return [...new Set(urls.map((url) => normalizeRemoteUrl(url || "")).filter(Boolean))];
|
|
}
|
|
|
|
function repoOwnerName(repo) {
|
|
return repo.owner?.login || repo.full_name.split("/")[0] || "Unknown";
|
|
}
|
|
|
|
function repoRemoteUrls(repo) {
|
|
return [repo.clone_url, repo.ssh_url, repo.html_url, repo.original_url]
|
|
.map((url) => normalizeRemoteUrl(url || ""))
|
|
.filter(Boolean);
|
|
}
|
|
|
|
function matchingServerRepoByRemote(remoteUrl = "") {
|
|
const normalizedRemote = normalizeRemoteUrl(remoteUrl);
|
|
if (!normalizedRemote) return null;
|
|
return repositories.find((repo) => repoRemoteUrls(repo).includes(normalizedRemote)) || null;
|
|
}
|
|
|
|
function matchingServerRepoByName(name = "") {
|
|
const normalizedName = name.trim().toLowerCase();
|
|
if (!normalizedName) return null;
|
|
return repositories.find((repo) => (repo.full_name.split("/").pop() || "").toLowerCase() === normalizedName) || null;
|
|
}
|
|
|
|
function applyTheme() {
|
|
const theme = getState().settings.theme || "dark";
|
|
const systemPrefersLight = window.matchMedia?.("(prefers-color-scheme: light)")?.matches;
|
|
document.documentElement.dataset.theme = theme === "system" && systemPrefersLight ? "light" : theme;
|
|
}
|
|
|
|
function selectedGitPath() {
|
|
return getState().settings.gitExecutablePath;
|
|
}
|
|
|
|
function isDetectedEditorPath(value = "", detectedEditors = []) {
|
|
const normalizedValue = value.trim().toLowerCase();
|
|
return detectedEditors.some((editor) => editor.executablePath.toLowerCase() === normalizedValue);
|
|
}
|
|
|
|
function selectedEditorDropdownValue(state) {
|
|
const editorPath = state.settings.externalEditorPath?.trim() || "";
|
|
if (!editorPath) return DEFAULT_EDITOR_VALUE;
|
|
return isDetectedEditorPath(editorPath, state.installedIdes) ? editorPath : CUSTOM_EDITOR_VALUE;
|
|
}
|
|
|
|
function externalEditorOptionsTemplate(state) {
|
|
const editorPath = state.settings.externalEditorPath?.trim() || "";
|
|
const selectedValue = selectedEditorDropdownValue(state);
|
|
const detectedOptions = state.installedIdes
|
|
.map((editor) => `<option value="${escapeHtml(editor.executablePath)}" ${selectedValue === editor.executablePath ? "selected" : ""}>${escapeHtml(editor.name)}</option>`)
|
|
.join("");
|
|
|
|
return `
|
|
<option value="${DEFAULT_EDITOR_VALUE}" ${selectedValue === DEFAULT_EDITOR_VALUE ? "selected" : ""}>VS Code command (code)</option>
|
|
${detectedOptions}
|
|
<option value="${CUSTOM_EDITOR_VALUE}" ${selectedValue === CUSTOM_EDITOR_VALUE ? "selected" : ""}>Custom application…</option>
|
|
`;
|
|
}
|
|
|
|
function windowControlsTemplate(isMacos = false) {
|
|
const controls = isMacos
|
|
? [
|
|
{ action: "close", label: "Close", icon: WINDOW_CLOSE_ICON, className: "gd-window-close" },
|
|
{ action: "minimize", label: "Minimize", icon: WINDOW_MINIMIZE_ICON, className: "gd-window-minimize" },
|
|
{ action: "maximize", label: "Maximize", icon: WINDOW_MAXIMIZE_ICON, className: "gd-window-maximize" },
|
|
]
|
|
: [
|
|
{ action: "minimize", label: "Minimize", icon: WINDOW_MINIMIZE_ICON, className: "gd-window-minimize" },
|
|
{ action: "maximize", label: "Maximize", icon: WINDOW_MAXIMIZE_ICON, className: "gd-window-maximize" },
|
|
{ action: "close", label: "Close", icon: WINDOW_CLOSE_ICON, className: "gd-window-close" },
|
|
];
|
|
|
|
return `<div class="gd-window-controls" role="group" aria-label="Window controls">
|
|
${controls.map((control) => `
|
|
<button class="gd-window-control ${control.className}" type="button" data-window-action="${control.action}" title="${control.label}" aria-label="${control.label} window">${control.icon}</button>
|
|
`).join("")}
|
|
</div>`;
|
|
}
|
|
|
|
function statusLabel(status = "") {
|
|
const labels = {
|
|
modified: "Modified",
|
|
added: "Added",
|
|
deleted: "Deleted",
|
|
renamed: "Renamed",
|
|
untracked: "Untracked",
|
|
conflicted: "Conflicted",
|
|
};
|
|
return labels[status] || "Modified";
|
|
}
|
|
|
|
function pluralize(count, singular, plural = `${singular}s`) {
|
|
return `${count} ${count === 1 ? singular : plural}`;
|
|
}
|
|
|
|
function remoteDisplayName(sync = {}) {
|
|
return sync.upstreamRemote || sync.defaultRemote || "origin";
|
|
}
|
|
|
|
function syncButtonConfig(state) {
|
|
if (!state.selectedRepoPath) {
|
|
return {
|
|
label: "No Repository",
|
|
subLabel: "Select a repo to begin",
|
|
tooltip: "Select a repository to sync.",
|
|
icon: SYNC_ICON,
|
|
action: "",
|
|
disabled: true,
|
|
};
|
|
}
|
|
|
|
const sync = state.sync;
|
|
const remote = remoteDisplayName(sync);
|
|
const operationLabels = {
|
|
fetch: "Fetching…",
|
|
pull: "Pulling…",
|
|
push: "Pushing…",
|
|
sync: "Syncing…",
|
|
publish: "Publishing…",
|
|
};
|
|
|
|
if (sync.operation) {
|
|
return {
|
|
label: operationLabels[sync.operation] || "Working…",
|
|
subLabel: "Git operation in progress",
|
|
tooltip: "A Git operation is already running.",
|
|
icon: sync.operation === "pull" ? PULL_ICON : sync.operation === "publish" || sync.operation === "push" ? PUSH_ICON : SYNC_ICON,
|
|
action: sync.operation,
|
|
disabled: true,
|
|
loading: true,
|
|
};
|
|
}
|
|
|
|
if (sync.loading && !sync.lastUpdated) {
|
|
return {
|
|
label: "Loading…",
|
|
subLabel: "Reading repository state",
|
|
tooltip: "Reading repository sync state.",
|
|
icon: SYNC_ICON,
|
|
action: "",
|
|
disabled: true,
|
|
loading: true,
|
|
};
|
|
}
|
|
|
|
if (sync.isDetached) {
|
|
return {
|
|
label: "Detached HEAD",
|
|
subLabel: "Checkout a branch to sync",
|
|
tooltip: "Detached HEAD cannot be pushed or pulled. Checkout a branch first.",
|
|
icon: BRANCH_ICON,
|
|
action: "",
|
|
disabled: true,
|
|
};
|
|
}
|
|
|
|
if (!sync.hasRemote && sync.lastUpdated) {
|
|
return {
|
|
label: "No remote",
|
|
subLabel: "Add a remote to sync",
|
|
tooltip: "This repository does not have a Git remote configured.",
|
|
icon: SYNC_ICON,
|
|
action: "",
|
|
disabled: true,
|
|
};
|
|
}
|
|
|
|
if (sync.isUnpublished || (!sync.upstream && sync.hasRemote)) {
|
|
return {
|
|
label: "Publish branch",
|
|
subLabel: `Publish ${sync.branch || "branch"} to ${remote}`,
|
|
tooltip: `Publish ${sync.branch || "the current branch"} to ${remote}.`,
|
|
icon: PUBLISH_ICON,
|
|
action: "publish",
|
|
disabled: false,
|
|
};
|
|
}
|
|
|
|
if (sync.behind > 0 && sync.ahead > 0) {
|
|
return {
|
|
label: "Sync changes",
|
|
subLabel: `${pluralize(sync.behind, "commit")} to pull · ${pluralize(sync.ahead, "commit")} to push`,
|
|
tooltip: `${pluralize(sync.behind, "commit")} to pull and ${pluralize(sync.ahead, "commit")} ready to push.`,
|
|
icon: SYNC_ICON,
|
|
action: "sync",
|
|
disabled: false,
|
|
};
|
|
}
|
|
|
|
if (sync.behind > 0) {
|
|
return {
|
|
label: `Pull ${remote}`,
|
|
subLabel: `${pluralize(sync.behind, "commit")} to pull`,
|
|
tooltip: `${pluralize(sync.behind, "commit")} to pull from ${remote}.`,
|
|
icon: PULL_ICON,
|
|
action: "pull",
|
|
disabled: false,
|
|
};
|
|
}
|
|
|
|
if (sync.ahead > 0) {
|
|
return {
|
|
label: `Push ${remote}`,
|
|
subLabel: `${pluralize(sync.ahead, "commit")} ready to push`,
|
|
tooltip: `${pluralize(sync.ahead, "commit")} ready to push to ${remote}.`,
|
|
icon: PUSH_ICON,
|
|
action: "push",
|
|
disabled: false,
|
|
};
|
|
}
|
|
|
|
return {
|
|
label: `Fetch ${remote}`,
|
|
subLabel: sync.error || "Your branch is up to date",
|
|
tooltip: sync.error ? `Last sync check failed: ${sync.error}` : "Your branch is up to date.",
|
|
icon: SYNC_ICON,
|
|
action: "fetch",
|
|
disabled: false,
|
|
};
|
|
}
|
|
|
|
function groupedChangedFiles(files = []) {
|
|
const order = ["modified", "added", "deleted", "renamed", "untracked", "conflicted"];
|
|
const groups = new Map(order.map((status) => [status, []]));
|
|
files.forEach((file) => {
|
|
const key = groups.has(file.status) ? file.status : "modified";
|
|
groups.get(key).push(file);
|
|
});
|
|
return order.map((status) => ({ status, files: groups.get(status) })).filter((group) => group.files.length);
|
|
}
|
|
|
|
function diffBinaryImagePreviewTemplate(diffResult) {
|
|
const mime = escapeHtml(diffResult.previewMime || "");
|
|
const b64 = diffResult.previewBase64 || "";
|
|
const caption = diffResult.diff ? escapeHtml(diffResult.diff) : "";
|
|
return `<div class="diff-preview diff-binary-image-panel">
|
|
<div class="diff-image-preview-frame">
|
|
<img class="diff-image-preview" alt="" decoding="async" src="data:${mime};base64,${b64}" />
|
|
</div>
|
|
${caption ? `<pre class="diff-binary-caption">${caption}</pre>` : ""}
|
|
</div>`;
|
|
}
|
|
|
|
function diffTemplate(diffResult) {
|
|
if (!diffResult) {
|
|
return workflowEmptyStateTemplate({
|
|
title: "Select a changed file",
|
|
message: "Choose a file from the changes list to inspect its diff before committing.",
|
|
icon: "diff",
|
|
actions: false,
|
|
});
|
|
}
|
|
if (diffResult.previewBase64 && diffResult.previewMime) {
|
|
return diffBinaryImagePreviewTemplate(diffResult);
|
|
}
|
|
if (diffResult.isBinary) {
|
|
return workflowEmptyStateTemplate({
|
|
title: "Binary file",
|
|
message: diffResult.diff || "Diff preview is not available for binary files.",
|
|
icon: "file",
|
|
actions: false,
|
|
});
|
|
}
|
|
if (diffResult.isDeleted && !diffResult.diff) {
|
|
return workflowEmptyStateTemplate({
|
|
title: "Deleted file",
|
|
message: "This file was removed from the working tree.",
|
|
icon: "file",
|
|
actions: false,
|
|
});
|
|
}
|
|
return `<div class="diff-preview diff-preview-inline">${renderDiff(diffResult.diff || "")}</div>`;
|
|
}
|
|
|
|
function branchOptionTemplate(branch) {
|
|
return `<button class="branch-menu-item ${branch.current ? "active" : ""}" data-branch-name="${escapeHtml(branch.name)}" type="button">
|
|
<span>${escapeHtml(branch.name)}</span>
|
|
${branch.current ? `<span class="branch-current-mark">Current</span>` : ""}
|
|
</button>`;
|
|
}
|
|
|
|
function renderDiff(diff = "") {
|
|
const lines = diff.split("\n");
|
|
return lines
|
|
.map((line) => {
|
|
let kind = "context";
|
|
if (line.startsWith("+++") || line.startsWith("---")) kind = "meta";
|
|
else if (line.startsWith("@@")) kind = "hunk";
|
|
else if (line.startsWith("+")) kind = "added";
|
|
else if (line.startsWith("-")) kind = "removed";
|
|
const sign = line.slice(0, 1) || " ";
|
|
return `<div class="diff-line diff-line-${kind}">
|
|
<span class="diff-gutter">${escapeHtml(sign)}</span>
|
|
<code>${escapeHtml(line || " ")}</code>
|
|
</div>`;
|
|
})
|
|
.join("");
|
|
}
|
|
|
|
function emptyStateIcon(type = "repo") {
|
|
if (type === "diff") {
|
|
return EMPTY_DIFF_ICON;
|
|
}
|
|
if (type === "file") {
|
|
return EMPTY_FILE_ICON;
|
|
}
|
|
return EMPTY_REPO_ICON;
|
|
}
|
|
|
|
function workflowEmptyStateTemplate({ title, message, icon = "repo", actions = true }) {
|
|
return `<div class="workflow-empty-state">
|
|
<div class="workflow-empty-icon">${emptyStateIcon(icon)}</div>
|
|
<h2>${escapeHtml(title)}</h2>
|
|
<p>${escapeHtml(message)}</p>
|
|
${actions ? `<div class="workflow-empty-actions">
|
|
<button class="primary-blue" type="button" data-open-modal="clone">Clone Repository</button>
|
|
<button type="button" data-open-modal="repos">Open Repository</button>
|
|
</div>` : ""}
|
|
</div>`;
|
|
}
|
|
|
|
function openBranchDialog(mode, target = "") {
|
|
const dialog = getState().branches.dialog;
|
|
dialog.mode = mode;
|
|
dialog.target = target;
|
|
dialog.value = mode === "rename" ? target : "";
|
|
dialog.error = "";
|
|
getState().branches.menuOpen = false;
|
|
render();
|
|
}
|
|
|
|
function closeBranchDialog() {
|
|
Object.assign(getState().branches.dialog, { mode: "", target: "", value: "", error: "" });
|
|
render();
|
|
}
|
|
|
|
function branchDialogTemplate(state, displayBranchName) {
|
|
const dialog = state.branches.dialog;
|
|
if (!dialog.mode) return "";
|
|
const isDelete = dialog.mode === "delete";
|
|
const title = dialog.mode === "create" ? "Create Branch" : dialog.mode === "rename" ? "Rename Branch" : "Delete Branch";
|
|
const description = isDelete
|
|
? "Choose a local branch to delete. This only removes the local branch."
|
|
: dialog.mode === "create"
|
|
? `Create a new branch from ${displayBranchName}.`
|
|
: `Rename ${dialog.target}.`;
|
|
return `<div class="modal-backdrop" role="presentation">
|
|
<div class="modal-card" role="dialog" aria-modal="true" aria-label="${escapeHtml(title)}">
|
|
<h3>${escapeHtml(title)}</h3>
|
|
<p class="muted">${escapeHtml(description)}</p>
|
|
${isDelete ? `
|
|
<select id="branch-dialog-input">
|
|
<option value="">Select branch...</option>
|
|
${state.branches.items.filter((branch) => !branch.current).map((branch) => `<option value="${escapeHtml(branch.name)}" ${branch.name === dialog.target ? "selected" : ""}>${escapeHtml(branch.name)}</option>`).join("")}
|
|
</select>
|
|
<div class="danger-note">This action cannot delete the current branch and may fail if the branch is not fully merged.</div>
|
|
` : `
|
|
<input id="branch-dialog-input" value="${escapeHtml(dialog.value)}" placeholder="Branch name" />
|
|
`}
|
|
${dialog.error ? `<div class="viewer-error">${escapeHtml(dialog.error)}</div>` : ""}
|
|
<div class="modal-actions">
|
|
<button id="branch-dialog-cancel" type="button">Cancel</button>
|
|
<button id="branch-dialog-confirm" class="${isDelete ? "danger" : "primary"}" type="button">${isDelete ? "Delete Branch" : "Save"}</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function languageForPath(path = "") {
|
|
const extension = path.split(".").pop()?.toLowerCase();
|
|
const names = {
|
|
js: "JavaScript",
|
|
ts: "TypeScript",
|
|
tsx: "TypeScript",
|
|
jsx: "JavaScript",
|
|
rs: "Rust",
|
|
json: "JSON",
|
|
css: "CSS",
|
|
html: "HTML",
|
|
htm: "HTML",
|
|
md: "Markdown",
|
|
toml: "TOML",
|
|
yml: "YAML",
|
|
yaml: "YAML",
|
|
};
|
|
return names[extension] || "Text";
|
|
}
|
|
|
|
function highlightCode(content = "", language = "Text") {
|
|
let html = escapeHtml(content);
|
|
if (["JavaScript", "TypeScript", "Rust"].includes(language)) {
|
|
html = html.replace(
|
|
/\b(async|await|const|let|var|function|return|if|else|for|while|class|struct|enum|impl|fn|pub|use|mod|match|Ok|Err|true|false|null)\b/g,
|
|
'<span class="syntax-keyword">$1</span>'
|
|
);
|
|
} else if (language === "JSON") {
|
|
html = html.replace(/("[^&]*?")(\s*:)/g, '<span class="syntax-key">$1</span>$2');
|
|
} else if (language === "CSS") {
|
|
html = html.replace(/([.#]?[a-zA-Z0-9_-]+)(\s*\{)/g, '<span class="syntax-key">$1</span>$2');
|
|
}
|
|
return html;
|
|
}
|
|
|
|
function isMarkdownPath(path = "") {
|
|
return /\.(md|markdown)$/i.test(path);
|
|
}
|
|
|
|
function safeMarkdownHref(value = "") {
|
|
const href = value.trim();
|
|
const lowerHref = href.toLowerCase();
|
|
if (!href || lowerHref.startsWith("javascript:") || lowerHref.startsWith("data:")) {
|
|
return "";
|
|
}
|
|
return href;
|
|
}
|
|
|
|
function renderMarkdownInline(value = "") {
|
|
return escapeHtml(value)
|
|
.replace(/`([^`]+)`/g, "<code>$1</code>")
|
|
.replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"[^&]*")?\)/g, (_match, label, href) => {
|
|
const safeHref = safeMarkdownHref(href.replaceAll("&", "&"));
|
|
return safeHref ? `<a href="${escapeHtml(safeHref)}">${label}</a>` : label;
|
|
})
|
|
.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
|
|
.replace(/__([^_]+)__/g, "<strong>$1</strong>")
|
|
.replace(/\*([^*]+)\*/g, "<em>$1</em>")
|
|
.replace(/_([^_]+)_/g, "<em>$1</em>");
|
|
}
|
|
|
|
function renderMarkdown(content = "") {
|
|
const lines = content.replace(/\r\n/g, "\n").split("\n");
|
|
const html = [];
|
|
let inFence = false;
|
|
let fenceLanguage = "";
|
|
let fenceLines = [];
|
|
let listType = "";
|
|
let listItems = [];
|
|
|
|
const flushList = () => {
|
|
if (!listType) return;
|
|
html.push(`<${listType}>${listItems.map((item) => `<li>${renderMarkdownInline(item)}</li>`).join("")}</${listType}>`);
|
|
listType = "";
|
|
listItems = [];
|
|
};
|
|
|
|
const flushFence = () => {
|
|
html.push(`<pre class="markdown-code" data-language="${escapeHtml(fenceLanguage)}"><code>${escapeHtml(fenceLines.join("\n"))}</code></pre>`);
|
|
inFence = false;
|
|
fenceLanguage = "";
|
|
fenceLines = [];
|
|
};
|
|
|
|
for (const line of lines) {
|
|
const fence = line.match(/^```(\w+)?\s*$/);
|
|
if (fence) {
|
|
if (inFence) {
|
|
flushFence();
|
|
} else {
|
|
flushList();
|
|
inFence = true;
|
|
fenceLanguage = fence[1] || "";
|
|
fenceLines = [];
|
|
}
|
|
continue;
|
|
}
|
|
|
|
if (inFence) {
|
|
fenceLines.push(line);
|
|
continue;
|
|
}
|
|
|
|
if (!line.trim()) {
|
|
flushList();
|
|
continue;
|
|
}
|
|
|
|
const heading = line.match(/^(#{1,6})\s+(.+)$/);
|
|
if (heading) {
|
|
flushList();
|
|
const level = heading[1].length;
|
|
html.push(`<h${level}>${renderMarkdownInline(heading[2])}</h${level}>`);
|
|
continue;
|
|
}
|
|
|
|
if (/^\s*[-*_]{3,}\s*$/.test(line)) {
|
|
flushList();
|
|
html.push("<hr>");
|
|
continue;
|
|
}
|
|
|
|
const quote = line.match(/^>\s?(.*)$/);
|
|
if (quote) {
|
|
flushList();
|
|
html.push(`<blockquote>${renderMarkdownInline(quote[1])}</blockquote>`);
|
|
continue;
|
|
}
|
|
|
|
const unordered = line.match(/^\s*[-*+]\s+(.+)$/);
|
|
if (unordered) {
|
|
if (listType && listType !== "ul") flushList();
|
|
listType = "ul";
|
|
listItems.push(unordered[1]);
|
|
continue;
|
|
}
|
|
|
|
const ordered = line.match(/^\s*\d+\.\s+(.+)$/);
|
|
if (ordered) {
|
|
if (listType && listType !== "ol") flushList();
|
|
listType = "ol";
|
|
listItems.push(ordered[1]);
|
|
continue;
|
|
}
|
|
|
|
flushList();
|
|
html.push(`<p>${renderMarkdownInline(line)}</p>`);
|
|
}
|
|
|
|
if (inFence) flushFence();
|
|
flushList();
|
|
return html.join("");
|
|
}
|
|
|
|
function decodeBase64Content(content = "") {
|
|
const cleaned = content.replace(/\s/g, "");
|
|
const binary = atob(cleaned);
|
|
const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
|
|
if (bytes.byteLength > maxPreviewBytes) {
|
|
return { content: "", size: bytes.byteLength, isBinary: false, tooLarge: true };
|
|
}
|
|
if (bytes.includes(0)) {
|
|
return { content: "", size: bytes.byteLength, isBinary: true, tooLarge: false };
|
|
}
|
|
try {
|
|
return {
|
|
content: new TextDecoder("utf-8", { fatal: true }).decode(bytes),
|
|
size: bytes.byteLength,
|
|
isBinary: false,
|
|
tooLarge: false,
|
|
};
|
|
} catch {
|
|
return { content: "", size: bytes.byteLength, isBinary: true, tooLarge: false };
|
|
}
|
|
}
|
|
|
|
function normaliseRemoteEntries(contents) {
|
|
const items = Array.isArray(contents) ? contents : [contents];
|
|
return items
|
|
.map((item) => ({
|
|
name: item.name,
|
|
path: item.path || item.name,
|
|
type: item.type === "dir" ? "dir" : "file",
|
|
size: item.size,
|
|
}))
|
|
.sort((a, b) => (a.type === b.type ? a.name.localeCompare(b.name) : a.type === "dir" ? -1 : 1));
|
|
}
|
|
|
|
function normaliseLocalEntries(entries) {
|
|
return entries.map((entry) => ({
|
|
name: entry.name,
|
|
path: entry.path,
|
|
type: entry.entryType === "tree" ? "dir" : "file",
|
|
size: entry.size,
|
|
}));
|
|
}
|
|
|
|
function serverFormTemplate(server = null) {
|
|
const defaults = {
|
|
id: "",
|
|
displayName: "",
|
|
serverUrl: "",
|
|
authMethod: "token",
|
|
token: "",
|
|
username: "",
|
|
password: "",
|
|
};
|
|
const config = { ...defaults, ...(server || {}) };
|
|
return `
|
|
<div class="stack" id="server-form-card">
|
|
<h4 class="gd-modal-section-title">${server ? "Edit Server" : "Add Server"}</h4>
|
|
<input type="hidden" name="id" value="${escapeHtml(config.id)}" />
|
|
<div>
|
|
<div class="label">Display name</div>
|
|
<input name="displayName" value="${escapeHtml(config.displayName)}" placeholder="Gitpub Main" />
|
|
</div>
|
|
<div>
|
|
<div class="label">Gitea server URL</div>
|
|
<input name="serverUrl" value="${escapeHtml(config.serverUrl)}" placeholder="https://git.example.com" />
|
|
</div>
|
|
<div>
|
|
<div class="label">Auth method</div>
|
|
<select name="authMethod">
|
|
<option value="token" ${config.authMethod === "token" ? "selected" : ""}>Access Token</option>
|
|
<option value="password" ${config.authMethod === "password" ? "selected" : ""}>Username / Password</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<div class="label">Access token</div>
|
|
<input name="token" value="${escapeHtml(config.token)}" placeholder="gitea token" />
|
|
</div>
|
|
<div class="row">
|
|
<div style="flex:1">
|
|
<div class="label">Username</div>
|
|
<input name="username" value="${escapeHtml(config.username)}" placeholder="username" />
|
|
</div>
|
|
<div style="flex:1">
|
|
<div class="label">Password</div>
|
|
<input type="password" name="password" value="${escapeHtml(config.password)}" placeholder="password" />
|
|
</div>
|
|
</div>
|
|
<div class="row wrap">
|
|
<button id="test-server-btn" type="button">Test connection</button>
|
|
<button id="save-server-btn" class="primary" type="button">Save server</button>
|
|
</div>
|
|
<div class="muted">${escapeHtml(serverTestResult || settingsNotice)}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function welcomeView() {
|
|
appRoot.innerHTML = `
|
|
<div class="welcome-wrap">
|
|
<div class="welcome-card stack">
|
|
<div class="welcome-logo">
|
|
<img src="/assets/logos/Gitpub-Word-Logo-2-White.svg" alt="Gitpub" class="welcome-logo-img" />
|
|
<span class="welcome-logo-desktop">Desktop</span>
|
|
</div>
|
|
<div class="panel stack">
|
|
<h1 class="title">Welcome to Gitpub Desktop</h1>
|
|
<p class="subtitle">
|
|
Connect your first Gitea backend. Gitpub Desktop works with any compatible Gitea server.
|
|
</p>
|
|
${serverFormTemplate(null)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
bindServerFormEvents();
|
|
}
|
|
|
|
function isOrgRepo(repo) {
|
|
const ownerLogin = repo.owner?.login || repo.full_name.split("/")[0];
|
|
if (currentUserLogin) {
|
|
return ownerLogin.toLowerCase() !== currentUserLogin.toLowerCase();
|
|
}
|
|
return repo.owner?.type === "Organization" || repo.owner?.type === "organization";
|
|
}
|
|
|
|
function filteredRepositories() {
|
|
const searchTerm = getState().repoSearch.trim().toLowerCase();
|
|
let result = repositories;
|
|
|
|
if (repoOwnerFilter === "personal") {
|
|
result = result.filter((repo) => !isOrgRepo(repo));
|
|
} else if (repoOwnerFilter === "orgs") {
|
|
result = result.filter((repo) => isOrgRepo(repo));
|
|
}
|
|
|
|
if (searchTerm) {
|
|
result = result.filter((repo) => repo.full_name.toLowerCase().includes(searchTerm));
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function groupedByOrg(repos) {
|
|
const groups = new Map();
|
|
for (const repo of repos) {
|
|
const org = repoOwnerName(repo);
|
|
if (!groups.has(org)) groups.set(org, []);
|
|
groups.get(org).push(repo);
|
|
}
|
|
return groups;
|
|
}
|
|
|
|
function localRepoOwnerName({ path = "", name = "", matchedRemoteUrl = "" } = {}) {
|
|
const remoteRepo = matchingServerRepoByRemote(matchedRemoteUrl);
|
|
if (remoteRepo) return repoOwnerName(remoteRepo);
|
|
|
|
const repoName = name || repoNameFromPath(path);
|
|
const namedRepo = matchingServerRepoByName(repoName);
|
|
if (namedRepo) return repoOwnerName(namedRepo);
|
|
|
|
return parentFolderName(path);
|
|
}
|
|
|
|
function groupedLocalRepos(items, ownerForItem) {
|
|
const groups = new Map();
|
|
for (const item of items) {
|
|
const owner = ownerForItem(item) || "Local";
|
|
if (!groups.has(owner)) groups.set(owner, []);
|
|
groups.get(owner).push(item);
|
|
}
|
|
return groups;
|
|
}
|
|
|
|
function serverRepoListTemplate(repos) {
|
|
const visibleRepos = repos.slice(0, 60);
|
|
if (!visibleRepos.length) {
|
|
return `<div class="gd-modal-empty">No repositories found</div>`;
|
|
}
|
|
|
|
return Array.from(groupedByOrg(visibleRepos).entries()).map(([owner, ownerRepos]) => `
|
|
<div class="repo-owner-group">
|
|
<div class="repo-owner-divider">
|
|
<span>${escapeHtml(owner)}</span>
|
|
</div>
|
|
${ownerRepos.map((repo) => `
|
|
<div class="gd-modal-list-item">
|
|
<div class="gd-modal-item-info">
|
|
<strong class="accent">${escapeHtml(repo.full_name)}</strong>
|
|
<span class="muted">${repo.private ? "Private" : "Public"} · ${escapeHtml(repo.updated_at || "recently")}</span>
|
|
</div>
|
|
<div class="row" style="gap:5px;flex-shrink:0">
|
|
<button class="view-repo-btn" data-repo-name="${escapeHtml(repo.full_name)}" type="button" style="font-size:12px;padding:3px 8px">View</button>
|
|
<button class="clone-repo-btn primary-blue" data-clone-url="${escapeHtml(repo.clone_url || "")}" type="button" style="font-size:12px;padding:3px 8px">Clone</button>
|
|
</div>
|
|
</div>`).join("")}
|
|
</div>
|
|
`).join("");
|
|
}
|
|
|
|
function recentLocalReposTemplate(paths = []) {
|
|
if (!paths.length) {
|
|
return `<div class="gd-modal-empty">No recent repositories</div>`;
|
|
}
|
|
|
|
return Array.from(groupedLocalRepos(paths, (path) => localRepoOwnerName({ path })).entries()).map(([owner, ownerPaths]) => `
|
|
<div class="repo-owner-group">
|
|
<div class="repo-owner-divider">
|
|
<span>${escapeHtml(owner)}</span>
|
|
</div>
|
|
${ownerPaths.map((path) => `
|
|
<div class="gd-modal-list-item">
|
|
<div class="gd-modal-item-info">
|
|
<strong>${escapeHtml(repoNameFromPath(path))}</strong>
|
|
<span class="muted gd-path-text" title="${escapeHtml(path)}">${escapeHtml(path)}</span>
|
|
</div>
|
|
<div class="row" style="gap:5px;flex-shrink:0">
|
|
<button class="open-recent-repo-btn" data-recent-repo-path="${escapeHtml(path)}" type="button">Open</button>
|
|
<button class="remove-recent-repo-btn danger" data-recent-repo-path="${escapeHtml(path)}" type="button" title="Remove from list" aria-label="Remove from list">${WINDOW_CLOSE_ICON}</button>
|
|
</div>
|
|
</div>`).join("")}
|
|
</div>
|
|
`).join("");
|
|
}
|
|
|
|
function localRepoScanTemplate() {
|
|
const state = getState();
|
|
const results = state.localRepoScanResults || [];
|
|
|
|
if (state.localRepoScanLoading) {
|
|
return `<div class="viewer-loading">Scanning local folders…</div>`;
|
|
}
|
|
|
|
if (state.localRepoScanError) {
|
|
return `<div class="viewer-error">${escapeHtml(state.localRepoScanError)}</div>`;
|
|
}
|
|
|
|
if (!results.length) {
|
|
return `<div class="gd-modal-empty">No local repositories scanned yet. Only repos with remotes from the selected server will appear.</div>`;
|
|
}
|
|
|
|
return `<div class="gd-modal-scan-list">
|
|
${Array.from(groupedLocalRepos(results, (repo) => localRepoOwnerName(repo)).entries()).map(([owner, ownerRepos]) => `
|
|
<div class="repo-owner-group">
|
|
<div class="repo-owner-divider">
|
|
<span>${escapeHtml(owner)}</span>
|
|
</div>
|
|
${ownerRepos.map((repo) => `
|
|
<div class="gd-modal-list-item">
|
|
<div class="gd-modal-item-info">
|
|
<strong>${escapeHtml(repo.name || repoNameFromPath(repo.path))}</strong>
|
|
<span class="muted gd-path-text" title="${escapeHtml(repo.path)}">${escapeHtml(repo.path)}</span>
|
|
${repo.matchedRemoteUrl ? `<span class="muted" style="font-size:11px">${escapeHtml(repo.matchedRemoteUrl)}</span>` : ""}
|
|
</div>
|
|
<div class="row" style="gap:5px;flex-shrink:0">
|
|
<button class="use-scanned-repo-btn" data-repo-path="${escapeHtml(repo.path)}" data-repo-name="${escapeHtml(repo.name || repoNameFromPath(repo.path))}" type="button">Open</button>
|
|
<button class="view-scanned-repo-btn" data-repo-path="${escapeHtml(repo.path)}" data-repo-name="${escapeHtml(repo.name || repoNameFromPath(repo.path))}" type="button">Viewer</button>
|
|
</div>
|
|
</div>`).join("")}
|
|
</div>
|
|
`).join("")}
|
|
</div>`;
|
|
}
|
|
|
|
function breadcrumbTemplate(repoName, path = "") {
|
|
const parts = path.split("/").filter(Boolean);
|
|
const crumbs = [`<button class="viewer-crumb-btn" data-viewer-path="" type="button">${escapeHtml(repoName)}</button>`];
|
|
parts.forEach((part, index) => {
|
|
const crumbPath = parts.slice(0, index + 1).join("/");
|
|
crumbs.push(`<span class="viewer-crumb-sep">/</span><button class="viewer-crumb-btn" data-viewer-path="${escapeHtml(crumbPath)}" type="button">${escapeHtml(part)}</button>`);
|
|
});
|
|
return crumbs.join("");
|
|
}
|
|
|
|
function filePreviewTemplate(file) {
|
|
const language = languageForPath(file.path);
|
|
const meta = [language, formatBytes(file.size)].filter(Boolean).join(" · ");
|
|
|
|
const header = `
|
|
<div class="viewer-file-panel-header">
|
|
<span class="viewer-file-name">${FILE_ICON} ${escapeHtml(file.path.split("/").pop())}</span>
|
|
<span class="muted">${escapeHtml(meta)}</span>
|
|
</div>`;
|
|
|
|
if (file.previewBase64 && file.previewMime) {
|
|
const mime = escapeHtml(file.previewMime);
|
|
const b64 = file.previewBase64;
|
|
return `${header}<div class="viewer-image-preview-wrap"><img class="viewer-image-preview" alt="" decoding="async" src="data:${mime};base64,${b64}" /></div>`;
|
|
}
|
|
if (file.tooLarge) {
|
|
return header + `<div class="empty-state viewer-empty"><div>File too large to preview</div><div class="muted">Preview is limited to ${formatBytes(maxPreviewBytes)}.</div></div>`;
|
|
}
|
|
if (file.isBinary) {
|
|
return header + `<div class="empty-state viewer-empty"><div>Binary file</div><div class="muted">Binary content cannot be previewed.</div></div>`;
|
|
}
|
|
if (isMarkdownPath(file.path)) {
|
|
return header + `<div class="markdown-body">${renderMarkdown(file.content || "")}</div>`;
|
|
}
|
|
return header + `<pre class="code-preview" data-language="${escapeHtml(language)}"><code>${highlightCode(file.content || "", language)}</code></pre>`;
|
|
}
|
|
|
|
// ── Modal content functions ───────────────────────────────────────────────────
|
|
|
|
function reposModalContent(state) {
|
|
const visibleRepos = filteredRepositories();
|
|
const activeServer = getActiveServer();
|
|
return `
|
|
<div class="gd-modal-tabs" role="tablist" aria-label="Repository sources">
|
|
<button class="gd-modal-tab ${activeReposTab === "local" ? "active" : ""}" data-repos-tab="local" type="button" role="tab" aria-selected="${activeReposTab === "local"}">Local Repositories</button>
|
|
<button class="gd-modal-tab ${activeReposTab === "server" ? "active" : ""}" data-repos-tab="server" type="button" role="tab" aria-selected="${activeReposTab === "server"}">Server Repositories</button>
|
|
</div>
|
|
<div class="gd-modal-tab-panel">
|
|
${activeReposTab === "local" ? `
|
|
<div class="gd-modal-section">
|
|
<h4 class="gd-modal-section-title">Recent Local Repositories</h4>
|
|
${recentLocalReposTemplate(state.settings.recentRepositories)}
|
|
|
|
<div class="gd-modal-divider"></div>
|
|
|
|
<h4 class="gd-modal-section-title">Open from Path</h4>
|
|
<div class="row" style="gap:6px">
|
|
<input id="local-repo-path-input" placeholder="Paste a repository path…" value="${escapeHtml(state.localRepoPathInput)}" />
|
|
<button id="open-local-repo-btn" type="button" style="white-space:nowrap">Open</button>
|
|
</div>
|
|
|
|
<div class="gd-modal-divider"></div>
|
|
|
|
<h4 class="gd-modal-section-title">Find Local Repositories</h4>
|
|
<div class="row" style="gap:6px;margin-bottom:6px">
|
|
<input id="local-repo-scan-root-input" placeholder="Folder to scan, e.g. F:\\Repos" value="${escapeHtml(state.localRepoScanRootInput || state.settings.defaultCloneDirectory)}" />
|
|
<button id="scan-local-repos-btn" type="button" ${state.localRepoScanLoading ? "disabled" : ""} style="white-space:nowrap">${state.localRepoScanLoading ? "Scanning…" : "Scan"}</button>
|
|
</div>
|
|
${localRepoScanTemplate()}
|
|
</div>
|
|
` : `
|
|
<div class="gd-modal-section gd-modal-section-alt">
|
|
<div class="gd-modal-section-header">
|
|
<h4 class="gd-modal-section-title" style="margin:0">Server Repositories</h4>
|
|
<div class="row" style="gap:8px;align-items:center">
|
|
<span class="muted" style="font-size:12px">${escapeHtml(activeServer?.displayName || "No server")}</span>
|
|
<button id="refresh-repos-btn" type="button" style="font-size:12px;padding:3px 8px">Refresh</button>
|
|
</div>
|
|
</div>
|
|
<input id="repo-search-input" placeholder="Search repositories…" value="${escapeHtml(state.repoSearch)}" style="margin-bottom:8px" />
|
|
<div class="repo-filter-pills" style="margin-bottom:10px">
|
|
<button class="pill-btn ${repoOwnerFilter === "all" ? "active" : ""}" data-owner-filter="all">All</button>
|
|
<button class="pill-btn ${repoOwnerFilter === "personal" ? "active" : ""}" data-owner-filter="personal">Personal</button>
|
|
<button class="pill-btn ${repoOwnerFilter === "orgs" ? "active" : ""}" data-owner-filter="orgs">Organizations</button>
|
|
</div>
|
|
<div class="gd-modal-scroll-list">
|
|
${serverRepoListTemplate(visibleRepos)}
|
|
</div>
|
|
</div>
|
|
`}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function cloneModalContent(state) {
|
|
const visibleRepos = filteredRepositories();
|
|
return `
|
|
<div class="gd-modal-narrow stack">
|
|
<div>
|
|
<div class="label">Server</div>
|
|
<select id="clone-server-select">
|
|
${state.settings.servers.map((server) => `<option value="${server.id}" ${server.id === state.settings.activeServerId ? "selected" : ""}>${escapeHtml(server.displayName)}</option>`).join("")}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<div class="label">Remote repository</div>
|
|
<select id="clone-repo-select">
|
|
<option value="">Paste URL manually below</option>
|
|
${visibleRepos.slice(0, 100).map((repo) => `<option value="${escapeHtml(repo.clone_url || "")}" ${repo.clone_url === state.cloneUrlInput ? "selected" : ""}>${escapeHtml(repo.full_name)}</option>`).join("")}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<div class="label">Repository URL</div>
|
|
<input id="clone-url-input" placeholder="https://git.example.com/org/repo.git" value="${escapeHtml(state.cloneUrlInput)}" />
|
|
</div>
|
|
<div>
|
|
<div class="label">Destination path</div>
|
|
<div class="gd-path-picker">
|
|
<input id="clone-destination-input" placeholder="${escapeHtml(state.settings.defaultCloneDirectory || "/Users/me/code/repo")}" value="${escapeHtml(state.cloneDestinationInput || state.settings.defaultCloneDirectory)}" />
|
|
<button id="clone-destination-browse-btn" type="button">Browse</button>
|
|
</div>
|
|
<span class="muted" style="font-size:12px">Choose a parent folder and Gitpub will create the repository folder inside it.</span>
|
|
</div>
|
|
<button id="clone-btn" class="primary" type="button">Clone Repository</button>
|
|
${gitOutput
|
|
? `<pre class="git-output" style="max-height:180px;overflow:auto;font-size:11px">${escapeHtml(gitOutput)}</pre>`
|
|
: `<span class="muted" style="font-size:12px">Clone output will appear here.</span>`}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function serversModalContent(state) {
|
|
const servers = state.settings.servers;
|
|
return `
|
|
<div class="gd-modal-two-col">
|
|
<div class="gd-modal-section">
|
|
<div class="gd-modal-section-header">
|
|
<h4 class="gd-modal-section-title" style="margin:0">Connected Servers</h4>
|
|
<button id="add-server-btn" type="button" class="primary">${PLUS_ICON} Add Server</button>
|
|
</div>
|
|
${settingsNotice ? `<div class="muted" style="font-size:12px;margin-bottom:8px">${escapeHtml(settingsNotice)}</div>` : ""}
|
|
${servers.length
|
|
? servers.map((server) => `
|
|
<div class="gd-server-item ${server.id === state.settings.activeServerId ? "gd-server-active" : ""}">
|
|
<div class="gd-server-name">${escapeHtml(server.displayName)}</div>
|
|
<div class="gd-server-url muted">${escapeHtml(server.serverUrl)}</div>
|
|
<div class="row" style="gap:4px;margin-top:6px">
|
|
<button class="set-default-server-btn" data-id="${server.id}" type="button" style="font-size:12px;padding:2px 8px">${server.id === state.settings.activeServerId ? `${CHECK_ICON} Active` : "Set active"}</button>
|
|
<button class="edit-server-btn" data-id="${server.id}" type="button" style="font-size:12px;padding:2px 8px">Edit</button>
|
|
<button class="delete-server-btn danger" data-id="${server.id}" type="button" style="font-size:12px;padding:2px 8px">Remove</button>
|
|
</div>
|
|
</div>`).join("")
|
|
: `<div class="gd-modal-empty">No servers configured</div>`}
|
|
</div>
|
|
<div class="gd-modal-section gd-modal-section-alt" id="server-form-slot">
|
|
<div class="gd-modal-empty">Select a server to edit, or add a new one.</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function settingsModalContent(state) {
|
|
const editorDropdownValue = selectedEditorDropdownValue(state);
|
|
const customEditorPath = editorDropdownValue === CUSTOM_EDITOR_VALUE ? state.settings.externalEditorPath?.trim() || "" : "";
|
|
return `
|
|
<div class="gd-modal-two-col">
|
|
<div class="gd-modal-section">
|
|
<h4 class="gd-modal-section-title">Appearance</h4>
|
|
<div class="label">Theme</div>
|
|
<select id="theme-select">
|
|
<option value="dark" ${state.settings.theme === "dark" ? "selected" : ""}>Dark</option>
|
|
<option value="light" ${state.settings.theme === "light" ? "selected" : ""}>Light</option>
|
|
<option value="system" ${state.settings.theme === "system" ? "selected" : ""}>System</option>
|
|
</select>
|
|
|
|
<div class="gd-modal-divider"></div>
|
|
|
|
<h4 class="gd-modal-section-title">Git</h4>
|
|
<div class="label">Git executable path</div>
|
|
<input id="git-path-input" value="${escapeHtml(state.settings.gitExecutablePath)}" placeholder="git or /usr/bin/git" />
|
|
<div class="label">Default clone directory</div>
|
|
<input id="default-clone-dir-input" value="${escapeHtml(state.settings.defaultCloneDirectory)}" placeholder="/Users/me/code" />
|
|
<div class="label">Code editor</div>
|
|
<div class="gd-editor-picker">
|
|
<select id="external-editor-select">
|
|
${externalEditorOptionsTemplate(state)}
|
|
</select>
|
|
<button id="rescan-editors-btn" type="button" ${state.installedIdeScanLoading ? "disabled" : ""}>${state.installedIdeScanLoading ? "Scanning..." : "Rescan"}</button>
|
|
</div>
|
|
${state.installedIdeScanError ? `<div class="viewer-error" style="margin-top:6px">${escapeHtml(state.installedIdeScanError)}</div>` : ""}
|
|
${!state.installedIdeScanLoading && !state.installedIdes.length ? `<div class="muted" style="font-size:12px;margin-top:4px">No installed IDEs detected yet. You can use the default <code>code</code> command or choose a custom app.</div>` : ""}
|
|
<div id="custom-editor-row" class="gd-path-picker ${editorDropdownValue === CUSTOM_EDITOR_VALUE ? "" : "hidden"}" style="margin-top:8px">
|
|
<input id="custom-editor-input" value="${escapeHtml(customEditorPath)}" placeholder="Choose an application or executable" />
|
|
<button id="custom-editor-browse-btn" type="button">Browse</button>
|
|
</div>
|
|
|
|
<div class="gd-modal-divider"></div>
|
|
|
|
<div class="label">Default server</div>
|
|
<select id="default-server-select">
|
|
<option value="">None</option>
|
|
${state.settings.servers.map((server) => `<option value="${server.id}" ${server.id === state.settings.activeServerId ? "selected" : ""}>${escapeHtml(server.displayName)}</option>`).join("")}
|
|
</select>
|
|
<label class="gd-check-all" style="margin-top:6px">
|
|
<input id="auto-fetch-checkbox" type="checkbox" ${state.settings.autoFetchOnRepoOpen ? "checked" : ""} />
|
|
<span>Auto-fetch when opening a repository</span>
|
|
</label>
|
|
<button id="save-basic-settings-btn" class="primary" type="button" style="margin-top:4px">Save Settings</button>
|
|
${settingsNotice ? `<div class="muted" style="font-size:12px;margin-top:4px">${escapeHtml(settingsNotice)}</div>` : ""}
|
|
</div>
|
|
<div class="gd-modal-section gd-modal-section-alt">
|
|
<h4 class="gd-modal-section-title">About</h4>
|
|
<div class="muted" style="font-size:13px;line-height:1.75">
|
|
<p style="margin:0 0 8px"><strong style="color:var(--text-main)">Gitpub Desktop</strong></p>
|
|
<p style="margin:0 0 8px">A focused desktop client for Gitea-compatible Git servers.</p>
|
|
<p style="margin:0">Built with Tauri 2 and vanilla JavaScript.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function viewerModalContent(state) {
|
|
const viewer = state.viewer;
|
|
if (!viewer.source) {
|
|
return `<div class="gd-modal-empty" style="padding:48px;text-align:center">
|
|
<p style="font-size:15px;margin:0 0 8px">No repository open in viewer</p>
|
|
<p class="muted" style="font-size:13px;margin:0">Open a repository from the Repositories panel first.</p>
|
|
</div>`;
|
|
}
|
|
|
|
const rows = [];
|
|
if (viewer.path) {
|
|
rows.push(`<button class="viewer-row" data-entry-type="dir" data-entry-path="${escapeHtml(parentPath(viewer.path))}" type="button">
|
|
<span class="viewer-row-icon">${FOLDER_ICON}</span>
|
|
<span class="viewer-row-name">..</span>
|
|
<span class="viewer-row-size"></span>
|
|
</button>`);
|
|
}
|
|
viewer.entries.forEach((entry) => {
|
|
const active = viewer.selectedFile?.path === entry.path ? " active" : "";
|
|
rows.push(`<button class="viewer-row${active}" data-entry-type="${entry.type}" data-entry-path="${escapeHtml(entry.path)}" type="button">
|
|
<span class="viewer-row-icon">${entry.type === "dir" ? FOLDER_ICON : FILE_ICON}</span>
|
|
<span class="viewer-row-name ${entry.type === "dir" ? "viewer-dir-name" : ""}">${escapeHtml(entry.name)}</span>
|
|
<span class="viewer-row-size muted">${entry.type === "file" ? formatBytes(entry.size) : ""}</span>
|
|
</button>`);
|
|
});
|
|
|
|
const showReadme = viewer.readmeFile && !viewer.selectedFile;
|
|
|
|
return `
|
|
<div class="gd-modal-viewer">
|
|
<div class="gd-modal-viewer-sidebar">
|
|
<div class="gd-modal-viewer-controls">
|
|
<div class="viewer-crumb-row">
|
|
${breadcrumbTemplate(viewer.repoName || "repo", viewer.path)}
|
|
</div>
|
|
<div class="row" style="gap:6px;align-items:center;flex-shrink:0">
|
|
<select id="viewer-branch-select" style="width:auto;font-size:12px;padding:3px 8px" ${viewer.loading ? "disabled" : ""}>
|
|
${viewer.branches.map((b) => `<option value="${escapeHtml(b.name)}" ${b.name === viewer.branch ? "selected" : ""}>${escapeHtml(b.name)}${b.current ? " ✓" : ""}</option>`).join("")}
|
|
</select>
|
|
<button id="viewer-refresh-btn" type="button" style="padding:3px 8px;font-size:12px" aria-label="Refresh viewer" title="Refresh viewer">${REFRESH_ICON}</button>
|
|
</div>
|
|
</div>
|
|
<div class="gd-viewer-tree">
|
|
${rows.join("")}
|
|
${!rows.length && !viewer.loading ? `<div class="gd-left-empty"><span class="muted">Empty folder</span></div>` : ""}
|
|
</div>
|
|
</div>
|
|
<div class="gd-modal-viewer-main">
|
|
${viewer.error ? `<div class="viewer-error" style="margin:12px">${escapeHtml(viewer.error)}</div>` : ""}
|
|
${viewer.loading ? `<div class="viewer-loading" style="margin:12px">Loading…</div>` : ""}
|
|
${viewer.selectedFile ? `<div style="height:100%;display:flex;flex-direction:column">${filePreviewTemplate(viewer.selectedFile)}</div>` : ""}
|
|
${showReadme ? `
|
|
<div class="viewer-readme-panel" style="border:0;border-radius:0;margin:0">
|
|
<div class="viewer-readme-header">${FILE_ICON}<span>${escapeHtml(viewer.readmeFile.path.split("/").pop())}</span></div>
|
|
<div class="viewer-readme-body markdown-body">${renderMarkdown(viewer.readmeFile.content || "")}</div>
|
|
</div>` : ""}
|
|
${!viewer.selectedFile && !viewer.readmeFile && !viewer.loading
|
|
? `<div class="gd-modal-empty" style="padding:48px;text-align:center">Select a file from the tree to preview</div>`
|
|
: ""}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function modalTemplate(state) {
|
|
if (!activeModal) return "";
|
|
const viewer = state.viewer;
|
|
const configs = {
|
|
repos: { title: "Repositories", content: reposModalContent(state), wide: true },
|
|
clone: { title: "Clone Repository", content: cloneModalContent(state), wide: false },
|
|
servers: { title: "Gitea Servers", content: serversModalContent(state), wide: true },
|
|
settings: { title: "Settings", content: settingsModalContent(state), wide: true },
|
|
viewer: { title: viewer.repoName ? `File Viewer — ${escapeHtml(viewer.repoName)}` : "File Viewer", content: viewerModalContent(state), wide: true, fullHeight: true },
|
|
};
|
|
const cfg = configs[activeModal];
|
|
if (!cfg) return "";
|
|
|
|
return `<div class="gd-modal-backdrop" id="modal-backdrop">
|
|
<div class="gd-modal ${cfg.wide ? "gd-modal-wide" : "gd-modal-narrow-dialog"} ${cfg.fullHeight ? "gd-modal-full-height" : ""}" role="dialog" aria-modal="true" aria-label="${cfg.title}">
|
|
<div class="gd-modal-header">
|
|
<h3 class="gd-modal-title">${cfg.title}</h3>
|
|
<button id="modal-close-btn" type="button" class="gd-modal-close" aria-label="Close">
|
|
${WINDOW_CLOSE_ICON}
|
|
</button>
|
|
</div>
|
|
<div class="gd-modal-body">
|
|
${cfg.content}
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
// ── Main dashboard view ───────────────────────────────────────────────────────
|
|
|
|
function dashboardView() {
|
|
const state = getState();
|
|
const displayRepoName = currentRepositoryName();
|
|
const displayBranchName = currentBranchName();
|
|
const hasLocalRepo = Boolean(state.selectedRepoPath);
|
|
const isMacos = currentPlatform() === "macos";
|
|
const toolbarPlatformClass = isMacos ? "gd-toolbar-macos" : "gd-toolbar-standard";
|
|
const windowControlsHTML = windowControlsTemplate(isMacos);
|
|
|
|
// ── Repository identity ─────────────────────────────────────────────────
|
|
const repoIdentity = (() => {
|
|
if (!state.selectedRepoPath && !state.selectedRepoName) {
|
|
return { primary: "No repository", secondary: "Select or clone a repository" };
|
|
}
|
|
const name = state.selectedRepoName || repoNameFromPath(state.selectedRepoPath);
|
|
const serverRepo = repositories.find((r) => {
|
|
const rName = r.full_name.split("/")[1] || "";
|
|
return rName === name || r.full_name === name;
|
|
});
|
|
if (serverRepo) {
|
|
return { primary: serverRepo.full_name, secondary: state.selectedRepoPath || "" };
|
|
}
|
|
const pathParts = (state.selectedRepoPath || "").split(/[/\\]/).filter(Boolean);
|
|
const primary = pathParts.length >= 2 ? pathParts.slice(-2).join("/") : name;
|
|
return { primary, secondary: state.selectedRepoPath || "" };
|
|
})();
|
|
|
|
// ── Contextual sync action ──────────────────────────────────────────────
|
|
const syncCfg = syncButtonConfig(state);
|
|
|
|
// ── Toolbar ─────────────────────────────────────────────────────────────
|
|
const toolbarHTML = `
|
|
${isMacos ? windowControlsHTML : ""}
|
|
<div class="gd-toolbar-left">
|
|
<button class="gd-toolbar-cell gd-repo-cell" type="button" data-open-modal="repos" title="${escapeHtml(state.selectedRepoPath || repoIdentity.primary)}">
|
|
<span class="gd-cell-icon">${LOCAL_REPO_ICON}</span>
|
|
<span class="gd-cell-copy">
|
|
<span class="gd-cell-label">Current repository</span>
|
|
<span class="gd-cell-value">${escapeHtml(repoIdentity.primary)}</span>
|
|
</span>
|
|
</button>
|
|
<div class="gd-branch-wrap">
|
|
<button id="branch-menu-btn" class="gd-toolbar-cell gd-branch-toolbar" type="button" ${!hasLocalRepo || state.branches.loading ? "disabled" : ""} title="${escapeHtml(displayBranchName)}">
|
|
<span class="gd-cell-icon">${BRANCH_ICON}</span>
|
|
<span class="gd-cell-copy">
|
|
<span class="gd-cell-label">Current branch</span>
|
|
<span class="gd-cell-value">${escapeHtml(displayBranchName)}</span>
|
|
</span>
|
|
${CHEVRON_DOWN_ICON}
|
|
</button>
|
|
${state.branches.menuOpen ? `<div class="branch-menu">
|
|
<div class="branch-menu-section">
|
|
<div class="branch-menu-label">Switch Branch</div>
|
|
${(state.branches.items.length ? state.branches.items : [{ name: displayBranchName, current: true }]).map(branchOptionTemplate).join("")}
|
|
</div>
|
|
<div class="branch-menu-section">
|
|
<button class="branch-menu-action" data-branch-action="create" type="button">Create new branch…</button>
|
|
<button class="branch-menu-action" data-branch-action="rename" data-branch-name="${escapeHtml(displayBranchName)}" type="button" ${!displayBranchName ? "disabled" : ""}>Rename current branch…</button>
|
|
<button class="branch-menu-action danger-subtle" data-branch-action="delete" type="button">Delete branch…</button>
|
|
</div>
|
|
</div>` : ""}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gd-toolbar-center">
|
|
<button class="gd-sync-btn ${syncCfg.loading ? "is-loading" : ""}" id="git-sync-action-btn" type="button" ${syncCfg.disabled ? "disabled" : ""} data-sync-action="${escapeHtml(syncCfg.action || "")}" title="${escapeHtml(syncCfg.tooltip)}" aria-label="${escapeHtml(syncCfg.tooltip)}">
|
|
<span class="gd-sync-icon">${syncCfg.icon}</span>
|
|
<span class="gd-cell-copy">
|
|
<span class="gd-cell-value gd-sync-label">${escapeHtml(syncCfg.label)}</span>
|
|
<span class="gd-cell-label">${escapeHtml(syncCfg.subLabel)}</span>
|
|
</span>
|
|
</button>
|
|
<div class="gd-toolbar-drag-space" data-tauri-drag-region aria-hidden="true"></div>
|
|
</div>
|
|
|
|
<div class="gd-toolbar-right">
|
|
<div class="gd-external-actions" role="group" aria-label="Repository actions">
|
|
<button id="open-file-explorer-btn" class="gd-icon-action" type="button" ${!hasLocalRepo ? "disabled" : ""} title="Open in File Explorer" aria-label="Open in File Explorer">
|
|
${EXPLORER_ICON}
|
|
</button>
|
|
<button id="open-code-editor-btn" class="gd-icon-action" type="button" ${!hasLocalRepo ? "disabled" : ""} title="Open in Code Editor" aria-label="Open in Code Editor">
|
|
${EDITOR_ICON}
|
|
</button>
|
|
</div>
|
|
<div class="gd-view-toggle" role="group" aria-label="View mode">
|
|
<button class="${activeView === "changes" ? "active" : ""}" data-view="changes" type="button">Changes</button>
|
|
<button class="${activeView === "history" ? "active" : ""}" data-view="history" type="button">History</button>
|
|
</div>
|
|
<div class="gd-utility-wrap">
|
|
<button id="utility-menu-btn" class="gd-utility-btn" type="button" title="More options" aria-label="More options">
|
|
${MORE_ICON}
|
|
</button>
|
|
${utilityMenuOpen ? `<div class="gd-utility-menu" role="menu">
|
|
<button class="gd-utility-menu-item" data-open-modal="repos" type="button" role="menuitem">
|
|
${REPOSITORY_ICON}
|
|
Open Repository
|
|
</button>
|
|
<button class="gd-utility-menu-item" data-open-modal="clone" type="button" role="menuitem">
|
|
${CLONE_ICON}
|
|
Clone Repository
|
|
</button>
|
|
<div class="gd-utility-separator"></div>
|
|
<button class="gd-utility-menu-item" data-open-modal="viewer" type="button" role="menuitem">
|
|
${FILE_ICON}
|
|
File Viewer
|
|
</button>
|
|
<button class="gd-utility-menu-item" id="open-file-explorer-menu-btn" type="button" role="menuitem" ${!hasLocalRepo ? "disabled" : ""}>
|
|
${EXPLORER_ICON}
|
|
Open in File Explorer
|
|
</button>
|
|
<button class="gd-utility-menu-item" id="open-code-editor-menu-btn" type="button" role="menuitem" ${!hasLocalRepo ? "disabled" : ""}>
|
|
${EDITOR_ICON}
|
|
Open in Code Editor
|
|
</button>
|
|
<div class="gd-utility-separator"></div>
|
|
<button class="gd-utility-menu-item" data-open-modal="servers" type="button" role="menuitem">
|
|
${SERVER_ICON}
|
|
Servers
|
|
</button>
|
|
<button class="gd-utility-menu-item" data-open-modal="settings" type="button" role="menuitem">
|
|
${SETTINGS_ICON}
|
|
Settings
|
|
</button>
|
|
</div>` : ""}
|
|
</div>
|
|
</div>
|
|
${isMacos ? "" : windowControlsHTML}
|
|
`;
|
|
|
|
// ── Sidebar content ─────────────────────────────────────────────────────
|
|
const filteredFiles = state.workingTree.files.filter((file) =>
|
|
file.path.toLowerCase().includes(state.changesFilter.trim().toLowerCase())
|
|
);
|
|
const selectedCount = filteredFiles.filter((file) => state.workingTree.selectedPaths.has(file.path)).length;
|
|
const allSelected = filteredFiles.length > 0 && selectedCount === filteredFiles.length;
|
|
|
|
let leftContentHTML = "";
|
|
|
|
if (activeView === "history") {
|
|
const historyFilter = state.historyFilter.trim().toLowerCase();
|
|
const commits = state.history.commits.filter((commit) =>
|
|
[commit.title, commit.author, commit.shortHash].some((v) => (v || "").toLowerCase().includes(historyFilter))
|
|
);
|
|
leftContentHTML = `
|
|
<div class="gd-changes-search-row gd-history-search-row">
|
|
<input id="history-filter-input" class="gd-filter-input" placeholder="Filter history…" value="${escapeHtml(state.historyFilter)}" style="grid-column:1/-1" />
|
|
</div>
|
|
<div class="gd-history-list">
|
|
${state.history.loading ? `<div class="viewer-loading" style="padding:10px 12px">Loading…</div>` : ""}
|
|
${state.history.error ? `<div class="viewer-error" style="margin:8px">${escapeHtml(state.history.error)}</div>` : ""}
|
|
${!hasLocalRepo ? `<div class="gd-left-empty-minimal"><span class="muted">No repository selected</span></div>` : ""}
|
|
${hasLocalRepo && !state.history.loading && commits.length
|
|
? commits.map((commit) => `
|
|
<button class="gd-history-item commit-item ${state.history.selectedHash === commit.hash ? "active" : ""}" data-commit-hash="${escapeHtml(commit.hash)}" type="button">
|
|
<span class="gd-history-info">
|
|
<span class="gd-history-name">${escapeHtml(commit.title)}</span>
|
|
<span class="gd-history-path muted">${escapeHtml(commit.author)} · ${escapeHtml(commit.shortHash)}</span>
|
|
</span>
|
|
</button>`).join("")
|
|
: ""}
|
|
${hasLocalRepo && !state.history.loading && !commits.length
|
|
? `<div class="gd-left-empty-minimal"><span class="muted">No commits found</span></div>`
|
|
: ""}
|
|
</div>
|
|
`;
|
|
} else {
|
|
leftContentHTML = `
|
|
<div class="gd-changes-search-row">
|
|
<button class="gd-filter-menu-btn" id="refresh-changes-btn" type="button" aria-label="Refresh" title="Refresh changes">
|
|
${REFRESH_ICON}
|
|
</button>
|
|
<input id="changes-filter-input" class="gd-filter-input" placeholder="Filter changed files" value="${escapeHtml(state.changesFilter)}" />
|
|
</div>
|
|
<div class="gd-changes-filter-row">
|
|
<label class="gd-check-all">
|
|
<input id="select-all-changes" type="checkbox" ${allSelected ? "checked" : ""} ${!filteredFiles.length ? "disabled" : ""} />
|
|
<span>${filteredFiles.length} changed file${filteredFiles.length === 1 ? "" : "s"}</span>
|
|
</label>
|
|
<span class="muted" style="font-size:11px">${selectedCount > 0 ? `${selectedCount} staged` : ""}</span>
|
|
</div>
|
|
<div class="gd-changes-list">
|
|
${state.workingTree.loading ? `<div class="viewer-loading" style="padding:10px 12px">Loading…</div>` : ""}
|
|
${state.workingTree.error ? `<div class="viewer-error" style="margin:8px">${escapeHtml(state.workingTree.error)}</div>` : ""}
|
|
${!hasLocalRepo ? `<div class="gd-left-empty-minimal"><span class="muted">No repository open</span></div>` : ""}
|
|
${hasLocalRepo && !state.workingTree.loading && !filteredFiles.length && !state.workingTree.error
|
|
? `<div class="gd-left-empty-minimal"><span class="muted">Working tree is clean</span></div>`
|
|
: ""}
|
|
${groupedChangedFiles(filteredFiles).map((group) => `
|
|
<div class="change-group">
|
|
<div class="change-group-title">${statusLabel(group.status)}</div>
|
|
${group.files.map((file) => `
|
|
<button class="change-file-row ${state.workingTree.selectedPath === file.path ? "active" : ""}" data-change-path="${escapeHtml(file.path)}" type="button">
|
|
<input class="change-file-checkbox" data-change-checkbox="${escapeHtml(file.path)}" type="checkbox" ${state.workingTree.selectedPaths.has(file.path) ? "checked" : ""} />
|
|
<span class="change-status change-status-${escapeHtml(file.status)}">${escapeHtml(file.status[0]?.toUpperCase() || "M")}</span>
|
|
<span class="change-file-name" title="${escapeHtml(file.originalPath ? `${file.originalPath} → ${file.path}` : file.path)}">${escapeHtml(file.path)}</span>
|
|
</button>
|
|
`).join("")}
|
|
</div>
|
|
`).join("")}
|
|
${gitOutput ? `<pre class="git-output gd-git-out">${escapeHtml(gitOutput)}</pre>` : ""}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ── Main area ───────────────────────────────────────────────────────────
|
|
let mainHTML = "";
|
|
|
|
if (activeView === "history") {
|
|
const commit = state.history.selectedCommit;
|
|
if (commit) {
|
|
mainHTML = `
|
|
<div class="gd-main-pad stack">
|
|
<div class="section-header">
|
|
<div>
|
|
<h3 class="title">${escapeHtml(commit.title)}</h3>
|
|
<p class="subtitle">${escapeHtml(commit.author)} · ${escapeHtml(commit.date)} · ${escapeHtml(commit.shortHash)}</p>
|
|
</div>
|
|
<button id="refresh-history-btn" type="button">Refresh</button>
|
|
</div>
|
|
<pre class="commit-message-view">${escapeHtml(commit.message)}</pre>
|
|
<div class="changed-files-chip-row">
|
|
${(commit.files || []).map((file) => `<span class="changed-file-chip">${escapeHtml(file.status)} ${escapeHtml(file.path)}</span>`).join("")}
|
|
</div>
|
|
<div class="diff-preview diff-preview-inline">${renderDiff(commit.diff || "No diff available.")}</div>
|
|
</div>`;
|
|
} else {
|
|
mainHTML = workflowEmptyStateTemplate({
|
|
title: hasLocalRepo ? "No commit selected" : "Open a repository to view history",
|
|
message: hasLocalRepo ? "Select a commit from the list to review its files and diff." : "History appears after you open or clone a local repository.",
|
|
icon: "diff",
|
|
actions: !hasLocalRepo,
|
|
});
|
|
}
|
|
} else {
|
|
const selectedChange = state.workingTree.files.find((file) => file.path === state.workingTree.selectedPath);
|
|
mainHTML = `
|
|
<div class="gd-main-pad stack">
|
|
<div class="section-header">
|
|
<div>
|
|
<h3 class="title">${selectedChange ? escapeHtml(selectedChange.path) : hasLocalRepo ? "No local changes" : "No repository selected"}</h3>
|
|
<p class="subtitle">${selectedChange ? `${statusLabel(selectedChange.status)} file` : hasLocalRepo ? "The working tree is clean." : "Open or clone a repository to begin."}</p>
|
|
</div>
|
|
<button id="refresh-changes-main-btn" type="button" ${!hasLocalRepo ? "disabled" : ""}>Refresh</button>
|
|
</div>
|
|
${state.workingTree.diffLoading ? `<div class="viewer-loading">Loading diff…</div>` : ""}
|
|
${state.workingTree.diffError ? `<div class="viewer-error">${escapeHtml(state.workingTree.diffError)}</div>` : ""}
|
|
${selectedChange
|
|
? diffTemplate(state.workingTree.selectedDiff)
|
|
: workflowEmptyStateTemplate({
|
|
title: hasLocalRepo ? "You're all caught up" : "Start with a repository",
|
|
message: hasLocalRepo
|
|
? "There are no uncommitted changes in this repository."
|
|
: "Open a local repository or clone one from a Gitea-compatible server.",
|
|
icon: hasLocalRepo ? "diff" : "repo",
|
|
actions: !hasLocalRepo,
|
|
})}
|
|
</div>`;
|
|
}
|
|
|
|
// ── Commit panel ────────────────────────────────────────────────────────
|
|
const hasCommitSummary = Boolean((state.commitSummary || state.commitMessage || "").trim());
|
|
const hasSelectedFiles = state.workingTree.selectedPaths.size > 0;
|
|
const canCommit = hasLocalRepo && hasSelectedFiles && hasCommitSummary;
|
|
|
|
const commitAreaHTML = `
|
|
<div class="gd-commit-area">
|
|
<input id="commit-summary-input" class="gd-commit-summary" placeholder="Summary (required)" value="${escapeHtml(state.commitSummary || state.commitMessage)}" />
|
|
<textarea id="commit-description-input" class="commit-desc-input" placeholder="Description (optional)">${escapeHtml(state.commitDescription)}</textarea>
|
|
<button id="commit-btn" class="primary gd-commit-btn" type="button" ${!canCommit ? "disabled" : ""}>
|
|
Commit to ${escapeHtml(displayBranchName)}
|
|
</button>
|
|
</div>`;
|
|
|
|
// ── Assemble ─────────────────────────────────────────────────────────────
|
|
appRoot.innerHTML = `
|
|
<div class="layout">
|
|
<header class="gd-toolbar ${toolbarPlatformClass}">
|
|
${toolbarHTML}
|
|
</header>
|
|
<aside class="gd-left">
|
|
<div class="gd-left-content">
|
|
${leftContentHTML}
|
|
</div>
|
|
${activeView === "changes" ? commitAreaHTML : ""}
|
|
</aside>
|
|
<main class="gd-main">
|
|
${mainHTML}
|
|
</main>
|
|
</div>
|
|
${modalTemplate(state)}
|
|
${branchDialogTemplate(state, displayBranchName)}
|
|
`;
|
|
|
|
bindDashboardEvents();
|
|
}
|
|
|
|
// ── Server form events ────────────────────────────────────────────────────────
|
|
|
|
function bindServerFormEvents(existingServer = null) {
|
|
const testButton = document.getElementById("test-server-btn");
|
|
const saveButton = document.getElementById("save-server-btn");
|
|
const formCard = document.getElementById("server-form-card");
|
|
if (!testButton || !saveButton || !formCard) return;
|
|
|
|
const collectPayload = () => {
|
|
const get = (name) => formCard.querySelector(`[name="${name}"]`)?.value?.trim() || "";
|
|
return {
|
|
id: get("id"),
|
|
displayName: get("displayName"),
|
|
serverUrl: get("serverUrl"),
|
|
authMethod: get("authMethod") || "token",
|
|
token: get("token"),
|
|
username: get("username"),
|
|
password: get("password"),
|
|
};
|
|
};
|
|
|
|
testButton.addEventListener("click", async () => {
|
|
const payload = collectPayload();
|
|
try {
|
|
const result = await testGiteaConnection(payload);
|
|
serverTestResult = `${result.ok ? "✓ Connected" : "✗ Failed"}: ${result.message} (${result.apiBaseUrl})`;
|
|
render();
|
|
openServerForm(existingServer?.id || null);
|
|
} catch (error) {
|
|
serverTestResult = `Connection test failed: ${error.message}`;
|
|
render();
|
|
openServerForm(existingServer?.id || null);
|
|
}
|
|
});
|
|
|
|
saveButton.addEventListener("click", () => {
|
|
const payload = collectPayload();
|
|
if (!payload.displayName || !payload.serverUrl) {
|
|
settingsNotice = "Display name and server URL are required.";
|
|
render();
|
|
if (existingServer) openServerForm(existingServer.id);
|
|
return;
|
|
}
|
|
|
|
const state = getState();
|
|
let nextServers = [...state.settings.servers];
|
|
const nextId = payload.id || uid();
|
|
const serverData = { ...payload, id: nextId };
|
|
const existingIndex = nextServers.findIndex((item) => item.id === nextId);
|
|
|
|
if (existingIndex >= 0) {
|
|
nextServers[existingIndex] = serverData;
|
|
settingsNotice = `Updated server ${payload.displayName}.`;
|
|
} else {
|
|
nextServers.push(serverData);
|
|
settingsNotice = `Added server ${payload.displayName}.`;
|
|
}
|
|
|
|
const activeServerId = state.settings.activeServerId || nextId;
|
|
setSettings({ ...state.settings, servers: nextServers, activeServerId });
|
|
serverTestResult = "";
|
|
render();
|
|
});
|
|
}
|
|
|
|
function openServerForm(serverId = null) {
|
|
const slot = document.getElementById("server-form-slot");
|
|
if (!slot) return;
|
|
|
|
const server = getState().settings.servers.find((item) => item.id === serverId) || null;
|
|
slot.innerHTML = serverFormTemplate(server);
|
|
bindServerFormEvents(server);
|
|
}
|
|
|
|
// ── Data loading ──────────────────────────────────────────────────────────────
|
|
|
|
async function loadRepositories() {
|
|
const activeServer = getActiveServer();
|
|
if (!activeServer) {
|
|
repositories = [...mockRepos];
|
|
currentUserLogin = "alice";
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const [user, repos] = await Promise.all([
|
|
fetchCurrentUser(activeServer),
|
|
fetchRepositories(activeServer),
|
|
]);
|
|
currentUserLogin = user.login || "";
|
|
repositories = repos;
|
|
} catch (error) {
|
|
settingsNotice = `Using mock repositories. API fetch failed: ${error.message}`;
|
|
currentUserLogin = "alice";
|
|
repositories = [...mockRepos];
|
|
}
|
|
}
|
|
|
|
async function autoLoadReadme() {
|
|
const state = getState();
|
|
const viewer = state.viewer;
|
|
const entry = viewer.entries.find(
|
|
(e) => e.type === "file" && /^readme(\.md|\.txt|\.rst)?$/i.test(e.name)
|
|
);
|
|
viewer.readmeFile = null;
|
|
if (!entry) return;
|
|
|
|
try {
|
|
if (viewer.source === "remote") {
|
|
const activeServer = getActiveServer();
|
|
const file = await fetchRepoContents(activeServer, viewer.repoName, entry.path, viewer.branch);
|
|
const decoded = file.encoding === "base64"
|
|
? decodeBase64Content(file.content || "")
|
|
: { content: file.content || "", isBinary: false, tooLarge: false };
|
|
if (!decoded.isBinary && !decoded.tooLarge) {
|
|
viewer.readmeFile = { path: entry.path, content: decoded.content };
|
|
}
|
|
} else {
|
|
const file = await readLocalRepoFile(
|
|
viewer.repoPath, viewer.branch, entry.path, state.settings.gitExecutablePath
|
|
);
|
|
if (!file.isBinary && !file.tooLarge) {
|
|
viewer.readmeFile = { path: entry.path, content: file.content || "" };
|
|
}
|
|
}
|
|
render();
|
|
} catch {
|
|
// non-fatal
|
|
}
|
|
}
|
|
|
|
function selectLocalRepo(path, name = "") {
|
|
const state = getState();
|
|
state.localRepoPathInput = path;
|
|
state.selectedRepoPath = path;
|
|
state.selectedRepoName = name || repoNameFromPath(path);
|
|
state.workingTree.selectedPath = "";
|
|
state.workingTree.selectedDiff = null;
|
|
state.history.selectedHash = "";
|
|
state.history.selectedCommit = null;
|
|
Object.assign(state.sync, {
|
|
loading: false,
|
|
error: "",
|
|
operation: "",
|
|
branch: "",
|
|
upstream: "",
|
|
upstreamRemote: "",
|
|
defaultRemote: "",
|
|
ahead: 0,
|
|
behind: 0,
|
|
hasRemote: false,
|
|
isDetached: false,
|
|
isUnpublished: false,
|
|
lastUpdated: 0,
|
|
});
|
|
addRecentRepo(path);
|
|
}
|
|
|
|
async function refreshBranches() {
|
|
const state = getState();
|
|
if (!state.selectedRepoPath) {
|
|
state.branches.items = [];
|
|
return;
|
|
}
|
|
state.branches.loading = true;
|
|
state.branches.error = "";
|
|
render();
|
|
try {
|
|
state.branches.items = await listLocalRepoBranches(state.selectedRepoPath, selectedGitPath());
|
|
} catch (error) {
|
|
state.branches.error = `Unable to load branches: ${error.message}`;
|
|
} finally {
|
|
state.branches.loading = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function refreshWorkingTree() {
|
|
const state = getState();
|
|
const tree = state.workingTree;
|
|
if (!state.selectedRepoPath) {
|
|
Object.assign(tree, { loading: false, error: "", branch: "", upstream: "", ahead: 0, behind: 0, files: [], selectedPath: "", selectedDiff: null });
|
|
render();
|
|
return;
|
|
}
|
|
|
|
tree.loading = true;
|
|
tree.error = "";
|
|
render();
|
|
try {
|
|
const status = await getWorkingTreeStatus(state.selectedRepoPath, selectedGitPath());
|
|
const previousSelection = new Set(tree.selectedPaths);
|
|
tree.branch = status.branch || "";
|
|
tree.upstream = status.upstream || "";
|
|
tree.ahead = status.ahead || 0;
|
|
tree.behind = status.behind || 0;
|
|
tree.files = status.files || [];
|
|
tree.selectedPaths = new Set(
|
|
tree.files
|
|
.map((file) => file.path)
|
|
.filter((path) => previousSelection.size ? previousSelection.has(path) : true)
|
|
);
|
|
if (!tree.files.some((file) => file.path === tree.selectedPath)) {
|
|
tree.selectedPath = tree.files[0]?.path || "";
|
|
tree.selectedDiff = null;
|
|
}
|
|
if (tree.selectedPath) {
|
|
await loadSelectedDiff(tree.selectedPath, false);
|
|
}
|
|
} catch (error) {
|
|
tree.error = `Unable to load changes: ${error.message}`;
|
|
} finally {
|
|
tree.loading = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function refreshSyncState({ silent = false } = {}) {
|
|
const state = getState();
|
|
const sync = state.sync;
|
|
const repoPath = state.selectedRepoPath;
|
|
if (!repoPath) {
|
|
Object.assign(sync, {
|
|
loading: false,
|
|
error: "",
|
|
branch: "",
|
|
upstream: "",
|
|
upstreamRemote: "",
|
|
defaultRemote: "",
|
|
ahead: 0,
|
|
behind: 0,
|
|
hasRemote: false,
|
|
isDetached: false,
|
|
isUnpublished: false,
|
|
lastUpdated: 0,
|
|
});
|
|
if (!silent) render();
|
|
return;
|
|
}
|
|
|
|
sync.loading = true;
|
|
sync.error = "";
|
|
if (!silent) render();
|
|
try {
|
|
const status = await getRepositorySyncStatus(repoPath, selectedGitPath());
|
|
if (getState().selectedRepoPath !== repoPath) return;
|
|
Object.assign(sync, {
|
|
branch: status.branch || "",
|
|
upstream: status.upstream || "",
|
|
upstreamRemote: status.upstreamRemote || "",
|
|
defaultRemote: status.defaultRemote || "",
|
|
ahead: status.ahead || 0,
|
|
behind: status.behind || 0,
|
|
hasRemote: Boolean(status.hasRemote),
|
|
isDetached: Boolean(status.isDetached),
|
|
isUnpublished: Boolean(status.isUnpublished),
|
|
lastUpdated: Date.now(),
|
|
});
|
|
state.workingTree.branch = sync.branch;
|
|
state.workingTree.upstream = sync.upstream;
|
|
state.workingTree.ahead = sync.ahead;
|
|
state.workingTree.behind = sync.behind;
|
|
} catch (error) {
|
|
if (getState().selectedRepoPath !== repoPath) return;
|
|
sync.error = error.message;
|
|
} finally {
|
|
if (getState().selectedRepoPath === repoPath) {
|
|
sync.loading = false;
|
|
render();
|
|
}
|
|
}
|
|
}
|
|
|
|
async function loadSelectedDiff(path, shouldRender = true) {
|
|
const state = getState();
|
|
const tree = state.workingTree;
|
|
const file = tree.files.find((item) => item.path === path);
|
|
if (!state.selectedRepoPath || !file) return;
|
|
tree.selectedPath = path;
|
|
tree.diffLoading = true;
|
|
tree.diffError = "";
|
|
if (shouldRender) render();
|
|
try {
|
|
tree.selectedDiff = await getFileDiff(state.selectedRepoPath, file.path, file.status, selectedGitPath());
|
|
} catch (error) {
|
|
tree.selectedDiff = null;
|
|
tree.diffError = `Unable to load diff: ${error.message}`;
|
|
} finally {
|
|
tree.diffLoading = false;
|
|
if (shouldRender) render();
|
|
}
|
|
}
|
|
|
|
async function refreshHistory() {
|
|
const state = getState();
|
|
const history = state.history;
|
|
if (!state.selectedRepoPath) {
|
|
Object.assign(history, { loading: false, error: "", commits: [], selectedHash: "", selectedCommit: null });
|
|
render();
|
|
return;
|
|
}
|
|
|
|
history.loading = true;
|
|
history.error = "";
|
|
render();
|
|
try {
|
|
history.commits = await getCommitHistory(state.selectedRepoPath, 100, selectedGitPath());
|
|
if (!history.selectedHash || !history.commits.some((commit) => commit.hash === history.selectedHash)) {
|
|
history.selectedHash = history.commits[0]?.hash || "";
|
|
history.selectedCommit = null;
|
|
}
|
|
if (history.selectedHash) {
|
|
await loadCommitDetail(history.selectedHash, false);
|
|
}
|
|
} catch (error) {
|
|
history.error = `Unable to load history: ${error.message}`;
|
|
} finally {
|
|
history.loading = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function loadCommitDetail(hash, shouldRender = true) {
|
|
const state = getState();
|
|
if (!state.selectedRepoPath || !hash) return;
|
|
state.history.selectedHash = hash;
|
|
state.history.error = "";
|
|
if (shouldRender) render();
|
|
try {
|
|
state.history.selectedCommit = await getCommitDetail(state.selectedRepoPath, hash, selectedGitPath());
|
|
} catch (error) {
|
|
state.history.error = `Unable to load commit: ${error.message}`;
|
|
} finally {
|
|
if (shouldRender) render();
|
|
}
|
|
}
|
|
|
|
async function refreshRepoData() {
|
|
await Promise.all([refreshWorkingTree(), refreshSyncState({ silent: true }), refreshBranches(), refreshHistory()]);
|
|
}
|
|
|
|
async function scanForLocalRepos() {
|
|
const state = getState();
|
|
const rootInput = document.getElementById("local-repo-scan-root-input")?.value?.trim() || "";
|
|
state.localRepoScanRootInput = rootInput;
|
|
|
|
if (!getActiveServer()) {
|
|
state.localRepoScanResults = [];
|
|
state.localRepoScanError = "Select a Gitea server before scanning local repositories.";
|
|
render();
|
|
return;
|
|
}
|
|
|
|
const allowedRemoteUrls = serverRepoRemoteUrls();
|
|
if (!allowedRemoteUrls.length) {
|
|
state.localRepoScanResults = [];
|
|
state.localRepoScanError = "No repository clone URLs loaded for the selected server. Refresh and try again.";
|
|
render();
|
|
return;
|
|
}
|
|
|
|
state.localRepoScanLoading = true;
|
|
state.localRepoScanError = "";
|
|
render();
|
|
|
|
const roots = [rootInput, state.settings.defaultCloneDirectory].filter(Boolean);
|
|
try {
|
|
state.localRepoScanResults = await scanLocalRepos(
|
|
[...new Set(roots)],
|
|
allowedRemoteUrls,
|
|
state.settings.gitExecutablePath,
|
|
4,
|
|
200
|
|
);
|
|
if (!state.localRepoScanResults.length) {
|
|
state.localRepoScanError = "No local repositories from the selected server were found.";
|
|
}
|
|
} catch (error) {
|
|
state.localRepoScanResults = [];
|
|
state.localRepoScanError = `Repo scan failed: ${error.message}`;
|
|
} finally {
|
|
state.localRepoScanLoading = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function loadViewerPath(path = "") {
|
|
const state = getState();
|
|
const viewer = state.viewer;
|
|
if (!viewer.source) return;
|
|
|
|
viewer.path = path;
|
|
viewer.loading = true;
|
|
viewer.error = "";
|
|
viewer.entries = [];
|
|
viewer.selectedFile = null;
|
|
viewer.readmeFile = null;
|
|
render();
|
|
|
|
try {
|
|
if (viewer.source === "remote") {
|
|
const activeServer = getActiveServer();
|
|
if (!activeServer) throw new Error("No active server is configured.");
|
|
const contents = await fetchRepoContents(activeServer, viewer.repoName, path, viewer.branch);
|
|
viewer.entries = normaliseRemoteEntries(contents).filter((entry) => entry.type === "dir" || entry.path !== path);
|
|
} else {
|
|
const entries = await listLocalRepoTree(
|
|
viewer.repoPath,
|
|
viewer.branch,
|
|
path,
|
|
state.settings.gitExecutablePath
|
|
);
|
|
viewer.entries = normaliseLocalEntries(entries);
|
|
}
|
|
viewer.loading = false;
|
|
render();
|
|
await autoLoadReadme();
|
|
} catch (error) {
|
|
viewer.error = `Unable to load repository contents: ${error.message}`;
|
|
viewer.loading = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function openViewerFile(path) {
|
|
const state = getState();
|
|
const viewer = state.viewer;
|
|
if (!viewer.source || !path) return;
|
|
|
|
viewer.loading = true;
|
|
viewer.error = "";
|
|
viewer.selectedFile = null;
|
|
render();
|
|
|
|
try {
|
|
if (viewer.source === "remote") {
|
|
const activeServer = getActiveServer();
|
|
if (!activeServer) throw new Error("No active server is configured.");
|
|
const file = await fetchRepoContents(activeServer, viewer.repoName, path, viewer.branch);
|
|
const decoded = file.encoding === "base64"
|
|
? decodeBase64Content(file.content || "")
|
|
: { content: file.content || "", size: file.size || 0, isBinary: false, tooLarge: false };
|
|
viewer.selectedFile = {
|
|
path: file.path || path,
|
|
size: file.size || decoded.size,
|
|
content: decoded.content,
|
|
isBinary: decoded.isBinary,
|
|
tooLarge: decoded.tooLarge,
|
|
};
|
|
} else {
|
|
const file = await readLocalRepoFile(
|
|
viewer.repoPath,
|
|
viewer.branch,
|
|
path,
|
|
state.settings.gitExecutablePath
|
|
);
|
|
viewer.selectedFile = {
|
|
path: file.path,
|
|
size: file.size,
|
|
content: file.content || "",
|
|
isBinary: file.isBinary,
|
|
tooLarge: file.tooLarge,
|
|
previewMime: file.previewMime,
|
|
previewBase64: file.previewBase64,
|
|
};
|
|
}
|
|
} catch (error) {
|
|
viewer.error = `Unable to preview file: ${error.message}`;
|
|
} finally {
|
|
viewer.loading = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function openRemoteViewer(repo) {
|
|
const state = getState();
|
|
const viewer = state.viewer;
|
|
Object.assign(viewer, {
|
|
source: "remote",
|
|
repoName: repo.full_name,
|
|
repoPath: "",
|
|
cloneUrl: repo.clone_url || "",
|
|
defaultBranch: repo.default_branch || "",
|
|
branch: "",
|
|
branches: [],
|
|
path: "",
|
|
entries: [],
|
|
selectedFile: null,
|
|
loading: true,
|
|
error: "",
|
|
});
|
|
activeModal = "viewer";
|
|
render();
|
|
|
|
try {
|
|
const activeServer = getActiveServer();
|
|
if (!activeServer) throw new Error("No active server is configured.");
|
|
const branches = await fetchRepoBranches(activeServer, repo.full_name);
|
|
const branchNames = branches.map((branch) => branch.name).filter(Boolean);
|
|
const selectedBranch = repo.default_branch || branchNames[0] || "";
|
|
viewer.branches = branchNames.map((name) => ({ name, current: name === selectedBranch }));
|
|
viewer.branch = selectedBranch;
|
|
await loadViewerPath("");
|
|
} catch (error) {
|
|
viewer.loading = false;
|
|
viewer.error = `Unable to open repository viewer: ${error.message}`;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function openLocalViewer() {
|
|
const state = getState();
|
|
const value = state.selectedRepoPath || state.localRepoPathInput;
|
|
if (!value) {
|
|
gitOutput = "Select or enter a local repository path first.";
|
|
render();
|
|
return;
|
|
}
|
|
|
|
const viewer = state.viewer;
|
|
Object.assign(viewer, {
|
|
source: "local",
|
|
repoName: state.selectedRepoName || value.split(/[/\\]/).filter(Boolean).pop() || value,
|
|
repoPath: value,
|
|
cloneUrl: "",
|
|
defaultBranch: "",
|
|
branch: "",
|
|
branches: [],
|
|
path: "",
|
|
entries: [],
|
|
selectedFile: null,
|
|
loading: true,
|
|
error: "",
|
|
});
|
|
activeModal = "viewer";
|
|
render();
|
|
|
|
try {
|
|
const branches = await listLocalRepoBranches(value, state.settings.gitExecutablePath);
|
|
const selectedBranch = branches.find((branch) => branch.current)?.name || branches[0]?.name || "";
|
|
viewer.branches = branches;
|
|
viewer.branch = selectedBranch;
|
|
await loadViewerPath("");
|
|
} catch (error) {
|
|
viewer.loading = false;
|
|
viewer.error = `Unable to open local viewer: ${error.message}`;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function refreshInstalledIdes() {
|
|
const state = getState();
|
|
state.installedIdeScanLoading = true;
|
|
state.installedIdeScanError = "";
|
|
render();
|
|
|
|
try {
|
|
state.installedIdes = await scanInstalledIdes();
|
|
} catch (error) {
|
|
state.installedIdes = [];
|
|
state.installedIdeScanError = `Unable to scan installed IDEs: ${error.message}`;
|
|
} finally {
|
|
state.installedIdeScanLoading = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function openSelectedRepoInFileExplorer() {
|
|
const state = getState();
|
|
if (!state.selectedRepoPath) {
|
|
gitOutput = "Select or enter a local repository path first.";
|
|
render();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await openInFileExplorer(state.selectedRepoPath);
|
|
gitOutput = `Opened in File Explorer:\n${state.selectedRepoPath}`;
|
|
} catch (error) {
|
|
gitOutput = `Open in File Explorer failed: ${error.message}`;
|
|
} finally {
|
|
utilityMenuOpen = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function openSelectedRepoInCodeEditor() {
|
|
const state = getState();
|
|
if (!state.selectedRepoPath) {
|
|
gitOutput = "Select or enter a local repository path first.";
|
|
render();
|
|
return;
|
|
}
|
|
|
|
const editorCommand = state.settings.externalEditorPath?.trim() || "code";
|
|
try {
|
|
await openInExternalEditor(state.selectedRepoPath, editorCommand);
|
|
gitOutput = `Opened in Code Editor with "${editorCommand}":\n${state.selectedRepoPath}`;
|
|
} catch (error) {
|
|
gitOutput = `Open in Code Editor failed: ${error.message}`;
|
|
} finally {
|
|
utilityMenuOpen = false;
|
|
render();
|
|
}
|
|
}
|
|
|
|
async function runRepoCommand(actionName, runner, operation = "") {
|
|
const state = getState();
|
|
if (!state.selectedRepoPath) {
|
|
gitOutput = "Select or enter a local repository path first.";
|
|
render();
|
|
return;
|
|
}
|
|
|
|
state.sync.operation = operation;
|
|
state.sync.error = "";
|
|
render();
|
|
try {
|
|
const result = await runner();
|
|
gitOutput = `${actionName}: ${result.command}\n\n${result.stdout || "(no stdout)"}\n${result.stderr ? `\n${result.stderr}` : ""}`;
|
|
} catch (error) {
|
|
gitOutput = `${actionName} failed: ${error.message}`;
|
|
state.sync.error = error.message;
|
|
} finally {
|
|
state.sync.operation = "";
|
|
}
|
|
render();
|
|
}
|
|
|
|
// ── Event bindings ────────────────────────────────────────────────────────────
|
|
|
|
function bindDashboardEvents() {
|
|
const state = getState();
|
|
|
|
// View toggle (Changes / History)
|
|
document.querySelectorAll("[data-view]").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const view = btn.dataset.view;
|
|
if (view === activeView) return;
|
|
activeView = view;
|
|
render();
|
|
if (activeView === "changes") refreshWorkingTree();
|
|
if (activeView === "history") refreshHistory();
|
|
});
|
|
});
|
|
|
|
// Open modal buttons (data-open-modal anywhere in the page)
|
|
document.querySelectorAll("[data-open-modal]").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
activeModal = btn.dataset.openModal;
|
|
utilityMenuOpen = false;
|
|
render();
|
|
if (activeModal === "settings" && !state.installedIdeScanLoading && !state.installedIdes.length) {
|
|
refreshInstalledIdes();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Utility menu toggle
|
|
document.getElementById("utility-menu-btn")?.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
utilityMenuOpen = !utilityMenuOpen;
|
|
render();
|
|
});
|
|
|
|
document.getElementById("open-file-explorer-btn")?.addEventListener("click", openSelectedRepoInFileExplorer);
|
|
document.getElementById("open-file-explorer-menu-btn")?.addEventListener("click", openSelectedRepoInFileExplorer);
|
|
document.getElementById("open-code-editor-btn")?.addEventListener("click", openSelectedRepoInCodeEditor);
|
|
document.getElementById("open-code-editor-menu-btn")?.addEventListener("click", openSelectedRepoInCodeEditor);
|
|
document.querySelectorAll("[data-window-action]").forEach((button) => {
|
|
button.addEventListener("click", () => handleWindowAction(button.dataset.windowAction || ""));
|
|
});
|
|
document.querySelector(".gd-toolbar-drag-space")?.addEventListener("mousedown", startWindowDrag);
|
|
document.querySelector(".gd-toolbar-drag-space")?.addEventListener("dblclick", () => handleWindowAction("maximize"));
|
|
|
|
// Modal close
|
|
document.getElementById("modal-close-btn")?.addEventListener("click", () => {
|
|
activeModal = "";
|
|
render();
|
|
});
|
|
|
|
document.getElementById("modal-backdrop")?.addEventListener("click", (event) => {
|
|
if (event.target === event.currentTarget) {
|
|
activeModal = "";
|
|
render();
|
|
}
|
|
});
|
|
|
|
// Contextual sync button
|
|
document.getElementById("git-sync-action-btn")?.addEventListener("click", () => {
|
|
const action = document.getElementById("git-sync-action-btn")?.dataset.syncAction || "fetch";
|
|
if (action === "pull") {
|
|
runRepoCommand("Pull", () => runGitPull(state.selectedRepoPath, selectedGitPath()), "pull").then(refreshRepoData);
|
|
} else if (action === "push") {
|
|
runRepoCommand("Push", () => runGitPush(state.selectedRepoPath, selectedGitPath()), "push").then(refreshRepoData);
|
|
} else if (action === "publish") {
|
|
runRepoCommand(
|
|
"Publish",
|
|
() => runGitPublishBranch(state.selectedRepoPath, state.sync.defaultRemote || "origin", selectedGitPath()),
|
|
"publish"
|
|
).then(refreshRepoData);
|
|
} else if (action === "sync") {
|
|
runRepoCommand("Sync", () => runGitSync(state.selectedRepoPath, selectedGitPath()), "sync").then(refreshRepoData);
|
|
} else {
|
|
runRepoCommand("Fetch", () => runGitFetch(state.selectedRepoPath, selectedGitPath()), "fetch").then(refreshRepoData);
|
|
}
|
|
});
|
|
|
|
// Changes filter
|
|
document.getElementById("changes-filter-input")?.addEventListener("input", (event) => {
|
|
state.changesFilter = event.target.value;
|
|
render();
|
|
});
|
|
|
|
// History filter
|
|
document.getElementById("history-filter-input")?.addEventListener("input", (event) => {
|
|
state.historyFilter = event.target.value;
|
|
render();
|
|
});
|
|
|
|
// Repo search (in modal)
|
|
document.getElementById("repo-search-input")?.addEventListener("input", (event) => {
|
|
state.repoSearch = event.target.value;
|
|
render();
|
|
});
|
|
|
|
// Repository modal tabs
|
|
document.querySelectorAll("[data-repos-tab]").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
activeReposTab = btn.dataset.reposTab || "local";
|
|
render();
|
|
});
|
|
});
|
|
|
|
// Refresh repos (in modal)
|
|
document.getElementById("refresh-repos-btn")?.addEventListener("click", async () => {
|
|
await loadRepositories();
|
|
render();
|
|
});
|
|
|
|
// Owner filter pills
|
|
document.querySelectorAll("[data-owner-filter]").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
repoOwnerFilter = btn.dataset.ownerFilter;
|
|
render();
|
|
});
|
|
});
|
|
|
|
// View repo (opens file viewer modal)
|
|
document.querySelectorAll(".view-repo-btn").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const repo = repositories.find((item) => item.full_name === button.dataset.repoName);
|
|
if (repo) openRemoteViewer(repo);
|
|
});
|
|
});
|
|
|
|
// Clone repo (prefill clone modal)
|
|
document.querySelectorAll(".clone-repo-btn").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
state.cloneUrlInput = button.dataset.cloneUrl || "";
|
|
activeModal = "clone";
|
|
render();
|
|
});
|
|
});
|
|
|
|
// Scan local repos
|
|
document.getElementById("scan-local-repos-btn")?.addEventListener("click", () => {
|
|
scanForLocalRepos();
|
|
});
|
|
|
|
// Use a scanned repo
|
|
document.querySelectorAll(".use-scanned-repo-btn").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
selectLocalRepo(button.dataset.repoPath || "", button.dataset.repoName || "");
|
|
activeModal = "";
|
|
activeView = "changes";
|
|
render();
|
|
refreshRepoData();
|
|
});
|
|
});
|
|
|
|
// View files of a scanned repo
|
|
document.querySelectorAll(".view-scanned-repo-btn").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
selectLocalRepo(button.dataset.repoPath || "", button.dataset.repoName || "");
|
|
openLocalViewer();
|
|
});
|
|
});
|
|
|
|
// Open recent repo
|
|
document.querySelectorAll(".open-recent-repo-btn").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
selectLocalRepo(button.dataset.recentRepoPath || "");
|
|
activeModal = "";
|
|
activeView = "changes";
|
|
render();
|
|
refreshRepoData();
|
|
});
|
|
});
|
|
|
|
// Remove recent repo
|
|
document.querySelectorAll(".remove-recent-repo-btn").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const path = button.dataset.recentRepoPath || "";
|
|
updateSettings({
|
|
recentRepositories: state.settings.recentRepositories.filter((item) => item !== path),
|
|
lastSelectedRepoPath: state.settings.lastSelectedRepoPath === path ? "" : state.settings.lastSelectedRepoPath,
|
|
});
|
|
if (state.selectedRepoPath === path) {
|
|
state.selectedRepoPath = "";
|
|
state.selectedRepoName = "";
|
|
}
|
|
render();
|
|
});
|
|
});
|
|
|
|
// Open local repo by path (repos modal)
|
|
document.getElementById("open-local-repo-btn")?.addEventListener("click", () => {
|
|
const value = document.getElementById("local-repo-path-input")?.value?.trim() || "";
|
|
if (!value) return;
|
|
selectLocalRepo(value);
|
|
activeModal = "";
|
|
activeView = "changes";
|
|
render();
|
|
refreshRepoData();
|
|
});
|
|
|
|
// Select all changes
|
|
document.getElementById("select-all-changes")?.addEventListener("change", (event) => {
|
|
const visiblePaths = state.workingTree.files
|
|
.filter((file) => file.path.toLowerCase().includes(state.changesFilter.trim().toLowerCase()))
|
|
.map((file) => file.path);
|
|
if (event.target.checked) {
|
|
visiblePaths.forEach((path) => state.workingTree.selectedPaths.add(path));
|
|
} else {
|
|
visiblePaths.forEach((path) => state.workingTree.selectedPaths.delete(path));
|
|
}
|
|
render();
|
|
});
|
|
|
|
// File checkboxes
|
|
document.querySelectorAll(".change-file-checkbox").forEach((checkbox) => {
|
|
checkbox.addEventListener("click", (event) => event.stopPropagation());
|
|
checkbox.addEventListener("change", (event) => {
|
|
const path = checkbox.dataset.changeCheckbox;
|
|
if (event.target.checked) {
|
|
state.workingTree.selectedPaths.add(path);
|
|
} else {
|
|
state.workingTree.selectedPaths.delete(path);
|
|
}
|
|
render();
|
|
});
|
|
});
|
|
|
|
// Change file row click (load diff)
|
|
document.querySelectorAll(".change-file-row").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
loadSelectedDiff(button.dataset.changePath || "");
|
|
});
|
|
});
|
|
|
|
// Commit summary input
|
|
document.getElementById("commit-summary-input")?.addEventListener("input", (event) => {
|
|
state.commitSummary = event.target.value;
|
|
state.commitMessage = event.target.value;
|
|
// Re-render to update button disabled state
|
|
const btn = document.getElementById("commit-btn");
|
|
if (btn) {
|
|
const hasSelectedFiles = state.workingTree.selectedPaths.size > 0;
|
|
const hasRepo = Boolean(state.selectedRepoPath);
|
|
const hasSummary = Boolean(event.target.value.trim());
|
|
btn.disabled = !(hasRepo && hasSelectedFiles && hasSummary);
|
|
}
|
|
});
|
|
|
|
// Commit description input
|
|
document.getElementById("commit-description-input")?.addEventListener("input", (event) => {
|
|
state.commitDescription = event.target.value;
|
|
});
|
|
|
|
// Commit button
|
|
document.getElementById("commit-btn")?.addEventListener("click", async () => {
|
|
state.commitSummary = document.getElementById("commit-summary-input")?.value?.trim() || "";
|
|
state.commitDescription = document.getElementById("commit-description-input")?.value || "";
|
|
const selectedPaths = [...state.workingTree.selectedPaths];
|
|
if (!state.commitSummary) {
|
|
gitOutput = "Commit summary is required.";
|
|
render();
|
|
return;
|
|
}
|
|
if (!selectedPaths.length) {
|
|
gitOutput = "Select at least one changed file before committing.";
|
|
render();
|
|
return;
|
|
}
|
|
try {
|
|
const result = await commitChanges(
|
|
state.selectedRepoPath,
|
|
selectedPaths,
|
|
state.commitSummary,
|
|
state.commitDescription,
|
|
selectedGitPath()
|
|
);
|
|
gitOutput = `${result.command}\n\n${result.stdout || "Commit created."}\n${result.stderr || ""}`;
|
|
state.commitSummary = "";
|
|
state.commitMessage = "";
|
|
state.commitDescription = "";
|
|
await refreshRepoData();
|
|
} catch (error) {
|
|
gitOutput = `Commit failed: ${error.message}`;
|
|
render();
|
|
}
|
|
});
|
|
|
|
// Branch menu button
|
|
document.getElementById("branch-menu-btn")?.addEventListener("click", () => {
|
|
state.branches.menuOpen = !state.branches.menuOpen;
|
|
render();
|
|
});
|
|
|
|
// Branch menu items
|
|
document.querySelectorAll(".branch-menu-item").forEach((button) => {
|
|
button.addEventListener("click", async () => {
|
|
const branch = button.dataset.branchName || "";
|
|
if (!branch || branch === state.workingTree.branch) {
|
|
state.branches.menuOpen = false;
|
|
render();
|
|
return;
|
|
}
|
|
try {
|
|
const result = await checkoutBranch(state.selectedRepoPath, branch, selectedGitPath());
|
|
gitOutput = `${result.command}\n\n${result.stdout || "Branch switched."}\n${result.stderr || ""}`;
|
|
state.branches.menuOpen = false;
|
|
await refreshRepoData();
|
|
} catch (error) {
|
|
gitOutput = `Branch switch failed: ${error.message}`;
|
|
state.branches.menuOpen = false;
|
|
render();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Branch menu actions (create/rename/delete dialog)
|
|
document.querySelectorAll(".branch-menu-action").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
openBranchDialog(button.dataset.branchAction, button.dataset.branchName || "");
|
|
});
|
|
});
|
|
|
|
// Branch dialog
|
|
document.getElementById("branch-dialog-cancel")?.addEventListener("click", () => closeBranchDialog());
|
|
|
|
document.getElementById("branch-dialog-input")?.addEventListener("input", (event) => {
|
|
state.branches.dialog.value = event.target.value;
|
|
});
|
|
|
|
document.getElementById("branch-dialog-confirm")?.addEventListener("click", async () => {
|
|
const dialog = state.branches.dialog;
|
|
const value = document.getElementById("branch-dialog-input")?.value?.trim() || "";
|
|
if (!value) {
|
|
dialog.error = dialog.mode === "delete" ? "Choose a branch to delete." : "Branch name is required.";
|
|
render();
|
|
return;
|
|
}
|
|
try {
|
|
const runner = dialog.mode === "create"
|
|
? () => createBranch(state.selectedRepoPath, value, selectedGitPath())
|
|
: dialog.mode === "rename"
|
|
? () => renameBranch(state.selectedRepoPath, dialog.target, value, selectedGitPath())
|
|
: () => deleteBranch(state.selectedRepoPath, value, false, selectedGitPath());
|
|
const result = await runner();
|
|
gitOutput = `${result.command}\n\n${result.stdout || "Branch updated."}\n${result.stderr || ""}`;
|
|
Object.assign(dialog, { mode: "", target: "", value: "", error: "" });
|
|
await refreshRepoData();
|
|
} catch (error) {
|
|
dialog.error = error.message;
|
|
render();
|
|
}
|
|
});
|
|
|
|
// Commit items in history
|
|
document.querySelectorAll(".commit-item").forEach((button) => {
|
|
button.addEventListener("click", () => loadCommitDetail(button.dataset.commitHash || ""));
|
|
});
|
|
|
|
// Refresh buttons
|
|
document.getElementById("refresh-changes-btn")?.addEventListener("click", () => Promise.all([refreshWorkingTree(), refreshSyncState({ silent: true })]));
|
|
document.getElementById("refresh-changes-main-btn")?.addEventListener("click", () => Promise.all([refreshWorkingTree(), refreshSyncState({ silent: true })]));
|
|
document.getElementById("refresh-history-btn")?.addEventListener("click", () => refreshHistory());
|
|
|
|
// Clone modal handlers
|
|
document.getElementById("clone-server-select")?.addEventListener("change", async (event) => {
|
|
updateSettings({ activeServerId: event.target.value || null });
|
|
await loadRepositories();
|
|
render();
|
|
});
|
|
|
|
document.getElementById("clone-repo-select")?.addEventListener("change", (event) => {
|
|
state.cloneUrlInput = event.target.value;
|
|
render();
|
|
});
|
|
|
|
document.getElementById("clone-destination-browse-btn")?.addEventListener("click", async () => {
|
|
state.cloneUrlInput = document.getElementById("clone-url-input")?.value?.trim() || "";
|
|
let selectedDirectory = "";
|
|
try {
|
|
selectedDirectory = await browseDirectory(state.settings.defaultCloneDirectory || "");
|
|
} catch (error) {
|
|
gitOutput = `Could not open folder picker: ${error.message}`;
|
|
render();
|
|
return;
|
|
}
|
|
|
|
if (!selectedDirectory) return;
|
|
const repoName = repoNameFromUrl(state.cloneUrlInput);
|
|
state.cloneDestinationInput = repoName ? joinDirectoryPath(selectedDirectory, repoName) : selectedDirectory;
|
|
render();
|
|
});
|
|
|
|
document.getElementById("clone-btn")?.addEventListener("click", async () => {
|
|
state.cloneUrlInput = document.getElementById("clone-url-input")?.value?.trim() || "";
|
|
state.cloneDestinationInput = document.getElementById("clone-destination-input")?.value?.trim() || "";
|
|
|
|
if (!state.cloneUrlInput || !state.cloneDestinationInput) {
|
|
gitOutput = "Clone URL and destination path are required.";
|
|
render();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await runGitClone(
|
|
state.cloneUrlInput,
|
|
state.cloneDestinationInput,
|
|
state.settings.gitExecutablePath
|
|
);
|
|
gitOutput = `${result.command}\n\n${result.stdout || "Clone completed."}\n${result.stderr || ""}`;
|
|
selectLocalRepo(state.cloneDestinationInput);
|
|
activeModal = "";
|
|
activeView = "changes";
|
|
await refreshRepoData();
|
|
} catch (error) {
|
|
gitOutput = `Clone failed: ${error.message}`;
|
|
}
|
|
render();
|
|
});
|
|
|
|
// Settings modal handlers
|
|
document.getElementById("external-editor-select")?.addEventListener("change", (event) => {
|
|
document.getElementById("custom-editor-row")?.classList.toggle("hidden", event.target.value !== CUSTOM_EDITOR_VALUE);
|
|
});
|
|
document.getElementById("rescan-editors-btn")?.addEventListener("click", () => refreshInstalledIdes());
|
|
document.getElementById("custom-editor-browse-btn")?.addEventListener("click", async () => {
|
|
const currentValue = document.getElementById("custom-editor-input")?.value?.trim() || "";
|
|
let selectedApplication = "";
|
|
try {
|
|
selectedApplication = await browseApplication(currentValue);
|
|
} catch (error) {
|
|
settingsNotice = `Could not open application picker: ${error.message}`;
|
|
render();
|
|
return;
|
|
}
|
|
|
|
if (!selectedApplication) return;
|
|
const input = document.getElementById("custom-editor-input");
|
|
if (input) input.value = selectedApplication;
|
|
});
|
|
|
|
document.getElementById("save-basic-settings-btn")?.addEventListener("click", () => {
|
|
const editorSelection = document.getElementById("external-editor-select")?.value || DEFAULT_EDITOR_VALUE;
|
|
const customEditorPath = document.getElementById("custom-editor-input")?.value?.trim() || "";
|
|
const externalEditorPath =
|
|
editorSelection === DEFAULT_EDITOR_VALUE
|
|
? ""
|
|
: editorSelection === CUSTOM_EDITOR_VALUE
|
|
? customEditorPath
|
|
: editorSelection;
|
|
|
|
updateSettings({
|
|
theme: document.getElementById("theme-select")?.value || "dark",
|
|
gitExecutablePath: document.getElementById("git-path-input")?.value?.trim() || "",
|
|
defaultCloneDirectory: document.getElementById("default-clone-dir-input")?.value?.trim() || "",
|
|
externalEditorPath,
|
|
activeServerId: document.getElementById("default-server-select")?.value || null,
|
|
autoFetchOnRepoOpen: Boolean(document.getElementById("auto-fetch-checkbox")?.checked),
|
|
});
|
|
applyTheme();
|
|
settingsNotice = "Saved.";
|
|
render();
|
|
});
|
|
|
|
// Servers modal handlers
|
|
document.getElementById("add-server-btn")?.addEventListener("click", () => openServerForm());
|
|
|
|
document.querySelectorAll(".set-default-server-btn").forEach((button) => {
|
|
button.addEventListener("click", async () => {
|
|
updateSettings({ activeServerId: button.dataset.id });
|
|
settingsNotice = "Active server updated.";
|
|
await loadRepositories();
|
|
render();
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".delete-server-btn").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const nextServers = getState().settings.servers.filter((server) => server.id !== button.dataset.id);
|
|
const nextActive =
|
|
getState().settings.activeServerId === button.dataset.id
|
|
? nextServers[0]?.id || null
|
|
: getState().settings.activeServerId;
|
|
setSettings({ ...getState().settings, servers: nextServers, activeServerId: nextActive });
|
|
settingsNotice = "Server removed.";
|
|
render();
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".edit-server-btn").forEach((button) => {
|
|
button.addEventListener("click", () => openServerForm(button.dataset.id));
|
|
});
|
|
|
|
// Viewer handlers (inside viewer modal)
|
|
document.getElementById("viewer-branch-select")?.addEventListener("change", (event) => {
|
|
state.viewer.branch = event.target.value;
|
|
loadViewerPath("");
|
|
});
|
|
|
|
document.getElementById("viewer-refresh-btn")?.addEventListener("click", () => {
|
|
loadViewerPath(state.viewer.path);
|
|
});
|
|
|
|
document.querySelectorAll(".viewer-crumb-btn").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
loadViewerPath(button.dataset.viewerPath || "");
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".viewer-row").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const path = button.dataset.entryPath || "";
|
|
if (button.dataset.entryType === "dir") {
|
|
loadViewerPath(path);
|
|
} else {
|
|
openViewerFile(path);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function render() {
|
|
applyTheme();
|
|
applyPlatformChrome();
|
|
dashboardView();
|
|
}
|
|
|
|
window.addEventListener("DOMContentLoaded", async () => {
|
|
applyTheme();
|
|
applyPlatformChrome();
|
|
await loadRepositories();
|
|
if (getState().selectedRepoPath) {
|
|
await refreshRepoData();
|
|
if (getState().settings.autoFetchOnRepoOpen) {
|
|
runRepoCommand("Fetch", () => runGitFetch(getState().selectedRepoPath, selectedGitPath()), "fetch").then(refreshRepoData);
|
|
}
|
|
}
|
|
window.setInterval(() => {
|
|
const state = getState();
|
|
if (!state.selectedRepoPath || state.sync.operation || state.sync.loading) return;
|
|
refreshSyncState({ silent: true });
|
|
}, 30000);
|
|
render();
|
|
});
|