Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5d34147b41 | ||
|
|
e18f8f1040 | ||
|
|
310a0fb09a | ||
|
|
b04158926d | ||
|
|
eef4869bbb | ||
|
|
97fc4fc1e0 | ||
|
|
e6d22765be | ||
|
|
312727ee73 | ||
|
|
5752243e6e | ||
|
|
0bbd5ce1e8 | ||
|
|
50d9232084 | ||
|
|
357a0b7c5f | ||
|
|
ab54b9b6b2 | ||
|
|
fe392d38bf | ||
|
|
628e2f7c0b | ||
|
|
1c7c53ddf9 | ||
|
|
900159a3a9 | ||
|
|
d800417d6d | ||
|
|
405f302db9 | ||
|
|
2cc1d34fc3 | ||
|
|
089aae5f5b | ||
|
|
841d1a41b7 | ||
|
|
d57b574fe1 | ||
|
|
ec1f10d535 |
@@ -23,7 +23,15 @@
|
||||
"Bash(npx vite *)",
|
||||
"Bash(cargo tree *)",
|
||||
"Bash(jobs)",
|
||||
"Bash(npx svelte-check *)"
|
||||
"Bash(npx svelte-check *)",
|
||||
"Bash(git log *)",
|
||||
"Bash(xxd)",
|
||||
"Bash(python3 -)",
|
||||
"Bash(echo \"exit: $?\")",
|
||||
"Bash(grep -n \"input,\\\\|select,\\\\|input {\\\\|select {\\\\|.repo-form input\\\\|input:focus\\\\|::placeholder\" src/app.css)",
|
||||
"Bash(sudo -n true)",
|
||||
"Bash(rustc --version)",
|
||||
"Read(//mnt/c/Users/cbr/Desktop/src-tauri/src/**)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,3 +5,4 @@
|
||||
.idea
|
||||
.DS_Store
|
||||
~
|
||||
.codex*
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "tauri-git-lite",
|
||||
"version": "0.0.2",
|
||||
"version": "2026.7.3",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "tauri-git-lite",
|
||||
"version": "0.0.2",
|
||||
"version": "2026.7.3",
|
||||
"dependencies": {
|
||||
"@lucide/svelte": "^1.21.0",
|
||||
"@tailwindcss/vite": "^4.3.1",
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "git-lite",
|
||||
"version": "0.0.2",
|
||||
"version": "2026.7.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -18,3 +18,24 @@ tauri-build = { version = "2", features = [] }
|
||||
|
||||
[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
|
||||
tauri-plugin-updater = "2"
|
||||
|
||||
# ── Build profiles ───────────────────────────────────────────────────────────
|
||||
# Dev: keep incremental compilation and emit only line-table debug info instead
|
||||
# of full debuginfo. This cuts link time noticeably (linking is the slow part of
|
||||
# a `tauri dev` recompile) while still giving panic backtraces with line numbers.
|
||||
[profile.dev]
|
||||
incremental = true
|
||||
debug = "line-tables-only"
|
||||
|
||||
# Optimize third-party dependencies once (they are cached), so the running dev
|
||||
# build is snappy without slowing down rebuilds of our own crate.
|
||||
[profile.dev.package."*"]
|
||||
opt-level = 2
|
||||
|
||||
# Release: smaller binary (also shrinks the auto-updater download) without
|
||||
# regressing runtime performance of the code-search feature.
|
||||
[profile.release]
|
||||
opt-level = 3
|
||||
lto = "thin"
|
||||
codegen-units = 1
|
||||
strip = true
|
||||
|
||||
+774
-31
File diff suppressed because it is too large
Load Diff
+14
-6
@@ -3,12 +3,13 @@
|
||||
mod git;
|
||||
|
||||
use git::{
|
||||
cancel_code_search, checkout_branch, commit, compare_commits, compare_file_to_head,
|
||||
compare_file_to_parent, cred_delete, cred_load, cred_save, diff_file_against_working_tree,
|
||||
get_remote_url, get_status, list_branches, list_commits, list_file_history,
|
||||
list_repository_files, merge_branch, open_repository, pull, push, read_conflict,
|
||||
resolve_conflict, resolve_conflict_side, restore_file_from_commit, restore_files,
|
||||
restore_to_commit, search_code_introductions, stage_files, unstage_files,
|
||||
apply_file_patch, cancel_code_search, checkout_branch, commit, compare_commits,
|
||||
compare_file_to_head, compare_file_to_parent, create_branch, cred_delete, cred_load, cred_save,
|
||||
delete_branch, diff_file_against_working_tree, get_file_patch, get_remote_url, get_status,
|
||||
list_branches, list_commits, list_file_history, list_repository_files, merge_branch,
|
||||
open_repo_in_explorer, open_repository, open_repository_bundle, pull, push, read_conflict,
|
||||
rename_branch, resolve_conflict, resolve_conflict_side, restore_file_from_commit,
|
||||
restore_files, restore_to_commit, search_code_introductions, stage_files, unstage_files,
|
||||
SearchCancellationState,
|
||||
};
|
||||
|
||||
@@ -19,12 +20,18 @@ fn main() {
|
||||
.plugin(tauri_plugin_dialog::init())
|
||||
.invoke_handler(tauri::generate_handler![
|
||||
open_repository,
|
||||
open_repo_in_explorer,
|
||||
get_status,
|
||||
list_branches,
|
||||
checkout_branch,
|
||||
create_branch,
|
||||
rename_branch,
|
||||
delete_branch,
|
||||
stage_files,
|
||||
unstage_files,
|
||||
restore_files,
|
||||
get_file_patch,
|
||||
apply_file_patch,
|
||||
commit,
|
||||
pull,
|
||||
push,
|
||||
@@ -33,6 +40,7 @@ fn main() {
|
||||
restore_file_from_commit,
|
||||
merge_branch,
|
||||
list_repository_files,
|
||||
open_repository_bundle,
|
||||
list_file_history,
|
||||
compare_commits,
|
||||
compare_file_to_head,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "GitLite",
|
||||
"version": "0.0.2",
|
||||
"version": "2026.7.3",
|
||||
"identifier": "com.git-lite",
|
||||
"build": {
|
||||
"beforeDevCommand": "npm run dev",
|
||||
@@ -28,7 +28,7 @@
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"targets": ["nsis"],
|
||||
"icon": ["icons/icon.ico"],
|
||||
"createUpdaterArtifacts": true,
|
||||
"windows": {
|
||||
|
||||
+735
-97
File diff suppressed because it is too large
Load Diff
+960
-5
File diff suppressed because it is too large
Load Diff
+25
-1
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { Download, GitBranch, LoaderCircle, Minus, RefreshCw, Search, Upload, X } from "@lucide/svelte";
|
||||
import { Download, FolderOpen, GitBranch, GitCompare, LoaderCircle, Minus, RefreshCw, Search, Upload, X } from "@lucide/svelte";
|
||||
|
||||
export let branch: string = "";
|
||||
export let ahead: number = 0;
|
||||
@@ -16,6 +16,8 @@
|
||||
export let onPush: () => void = () => {};
|
||||
export let onRefresh: () => void = () => {};
|
||||
export let onSearch: () => void = () => {};
|
||||
export let onCompare: () => void = () => {};
|
||||
export let onOpenInExplorer: () => void = () => {};
|
||||
export let onToggleAutoRefresh: () => void = () => {};
|
||||
|
||||
const win = getCurrentWindow();
|
||||
@@ -81,6 +83,17 @@
|
||||
<!-- Right: actions + window controls -->
|
||||
<div class="titlebar-right">
|
||||
<div class="titlebar-actions" role="toolbar" aria-label="Repository actions">
|
||||
<button
|
||||
class="tb-action"
|
||||
onclick={onOpenInExplorer}
|
||||
disabled={!hasRepository || isBusy}
|
||||
title="Open repository in Explorer"
|
||||
aria-label="Open repository in Explorer"
|
||||
>
|
||||
<FolderOpen size={14} aria-hidden="true" />
|
||||
<span class="tb-action-label">Explorer</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="tb-action"
|
||||
onclick={onSearch}
|
||||
@@ -92,6 +105,17 @@
|
||||
<span class="tb-action-label">Search</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="tb-action"
|
||||
onclick={onCompare}
|
||||
disabled={!hasRepository || isBusy}
|
||||
title="Compare commits"
|
||||
aria-label="Compare commits"
|
||||
>
|
||||
<GitCompare size={14} aria-hidden="true" />
|
||||
<span class="tb-action-label">Compare</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="tb-action"
|
||||
onclick={onPull}
|
||||
|
||||
@@ -1,7 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { GitBranch, GitMerge } from "@lucide/svelte";
|
||||
import { Check, ChevronDown, ChevronRight, Folder, FolderOpen, GitBranch, GitMerge, Pencil, Plus, Trash2, X } from "@lucide/svelte";
|
||||
import type { GitBranch as GitBranchInfo } from "../types";
|
||||
|
||||
type BranchTreeNode = BranchFolderNode | BranchLeafNode;
|
||||
|
||||
interface BranchFolderNode {
|
||||
kind: "folder";
|
||||
id: string;
|
||||
name: string;
|
||||
children: BranchTreeNode[];
|
||||
branchCount: number;
|
||||
current: boolean;
|
||||
folders: Map<string, BranchFolderNode>;
|
||||
}
|
||||
|
||||
interface BranchLeafNode {
|
||||
kind: "branch";
|
||||
id: string;
|
||||
branch: GitBranchInfo;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
type BranchRow = BranchFolderRow | BranchLeafRow;
|
||||
|
||||
interface BranchFolderRow {
|
||||
kind: "folder";
|
||||
id: string;
|
||||
name: string;
|
||||
depth: number;
|
||||
branchCount: number;
|
||||
current: boolean;
|
||||
}
|
||||
|
||||
interface BranchLeafRow {
|
||||
kind: "branch";
|
||||
id: string;
|
||||
branch: GitBranchInfo;
|
||||
displayName: string;
|
||||
depth: number;
|
||||
scopeLabel: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
branches: GitBranchInfo[];
|
||||
localBranches: GitBranchInfo[];
|
||||
@@ -10,6 +49,9 @@
|
||||
isBusy: boolean;
|
||||
onCheckout: (branch: GitBranchInfo) => void;
|
||||
onMerge: (branch: GitBranchInfo) => void;
|
||||
onCreateBranch: (branchName: string) => void | Promise<void>;
|
||||
onRenameBranch: (branch: GitBranchInfo) => void | Promise<void>;
|
||||
onDeleteBranch: (branch: GitBranchInfo) => void | Promise<void>;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -20,16 +62,217 @@
|
||||
isBusy = false,
|
||||
onCheckout = () => {},
|
||||
onMerge = () => {},
|
||||
onCreateBranch = () => {},
|
||||
onRenameBranch = () => {},
|
||||
onDeleteBranch = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let localOpen = $state(true);
|
||||
let remoteOpen = $state(false);
|
||||
let createOpen = $state(false);
|
||||
let newBranchName = $state("");
|
||||
let createInput = $state<HTMLInputElement | null>(null);
|
||||
let panelElement = $state<HTMLElement | null>(null);
|
||||
let contextBranch = $state<GitBranchInfo | null>(null);
|
||||
let contextMenuX = $state(0);
|
||||
let contextMenuY = $state(0);
|
||||
let collapsedBranchFolders = $state<Set<string>>(new Set());
|
||||
|
||||
let localBranchRows = $derived(buildBranchRows("local", localBranches, "local"));
|
||||
let remoteBranchRows = $derived(buildBranchRows("remote", remoteBranches, "remote"));
|
||||
|
||||
function createFolder(id: string, name: string): BranchFolderNode {
|
||||
return {
|
||||
kind: "folder",
|
||||
id,
|
||||
name,
|
||||
children: [],
|
||||
branchCount: 0,
|
||||
current: false,
|
||||
folders: new Map(),
|
||||
};
|
||||
}
|
||||
|
||||
function buildBranchRows(scope: string, branchList: GitBranchInfo[], scopeLabel: string): BranchRow[] {
|
||||
const root = createFolder(`${scope}:root`, "");
|
||||
|
||||
for (const branch of branchList) {
|
||||
const parts = branch.name.split("/").filter(Boolean);
|
||||
const displayName = parts.length > 0 ? parts[parts.length - 1] : branch.name;
|
||||
const folderParts = parts.slice(0, -1);
|
||||
let parent = root;
|
||||
|
||||
for (let index = 0; index < folderParts.length; index += 1) {
|
||||
const folderName = folderParts[index];
|
||||
const folderPath = folderParts.slice(0, index + 1).join("/");
|
||||
let folder = parent.folders.get(folderName);
|
||||
|
||||
if (!folder) {
|
||||
folder = createFolder(`${scope}:folder:${folderPath}`, folderName);
|
||||
parent.folders.set(folderName, folder);
|
||||
parent.children.push(folder);
|
||||
}
|
||||
|
||||
folder.branchCount += 1;
|
||||
folder.current ||= branch.current;
|
||||
parent = folder;
|
||||
}
|
||||
|
||||
parent.children.push({
|
||||
kind: "branch",
|
||||
id: `${scope}:branch:${branch.name}`,
|
||||
branch,
|
||||
displayName,
|
||||
});
|
||||
}
|
||||
|
||||
sortBranchNodes(root.children);
|
||||
|
||||
const rows: BranchRow[] = [];
|
||||
flattenBranchNodes(root.children, rows, 0, scopeLabel);
|
||||
return rows;
|
||||
}
|
||||
|
||||
function sortBranchNodes(nodes: BranchTreeNode[]) {
|
||||
nodes.sort((left, right) => {
|
||||
if (left.kind !== right.kind) return left.kind === "folder" ? -1 : 1;
|
||||
const leftName = left.kind === "folder" ? left.name : left.displayName;
|
||||
const rightName = right.kind === "folder" ? right.name : right.displayName;
|
||||
return leftName.localeCompare(rightName, undefined, { sensitivity: "base" });
|
||||
});
|
||||
|
||||
for (const node of nodes) {
|
||||
if (node.kind === "folder") sortBranchNodes(node.children);
|
||||
}
|
||||
}
|
||||
|
||||
function flattenBranchNodes(nodes: BranchTreeNode[], rows: BranchRow[], depth: number, scopeLabel: string) {
|
||||
for (const node of nodes) {
|
||||
if (node.kind === "folder") {
|
||||
rows.push({
|
||||
kind: "folder",
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
depth,
|
||||
branchCount: node.branchCount,
|
||||
current: node.current,
|
||||
});
|
||||
|
||||
if (isBranchFolderOpen(node.id)) {
|
||||
flattenBranchNodes(node.children, rows, depth + 1, scopeLabel);
|
||||
}
|
||||
} else {
|
||||
rows.push({
|
||||
kind: "branch",
|
||||
id: node.id,
|
||||
branch: node.branch,
|
||||
displayName: node.displayName,
|
||||
depth,
|
||||
scopeLabel,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isBranchFolderOpen(id: string) {
|
||||
return !collapsedBranchFolders.has(id);
|
||||
}
|
||||
|
||||
function toggleBranchFolder(id: string) {
|
||||
const next = new Set(collapsedBranchFolders);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
collapsedBranchFolders = next;
|
||||
}
|
||||
|
||||
function openCreateForm() {
|
||||
if (!hasRepository || isBusy) return;
|
||||
createOpen = true;
|
||||
queueMicrotask(() => createInput?.focus());
|
||||
}
|
||||
|
||||
function closeCreateForm() {
|
||||
createOpen = false;
|
||||
newBranchName = "";
|
||||
}
|
||||
|
||||
async function submitCreate(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
const value = newBranchName.trim();
|
||||
if (!value || !hasRepository || isBusy) return;
|
||||
await onCreateBranch(value);
|
||||
newBranchName = "";
|
||||
createOpen = false;
|
||||
localOpen = true;
|
||||
}
|
||||
|
||||
function checkoutOnDoubleClick(event: MouseEvent, branch: GitBranchInfo) {
|
||||
if (branch.current || isBusy) return;
|
||||
const target = event.target instanceof HTMLElement ? event.target : null;
|
||||
if (target?.closest("button")) return;
|
||||
onCheckout(branch);
|
||||
}
|
||||
|
||||
function openBranchContextMenu(event: MouseEvent, branch: GitBranchInfo) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (isBusy || branch.remote) return;
|
||||
|
||||
const rect = panelElement?.getBoundingClientRect();
|
||||
const rawX = rect ? event.clientX - rect.left : event.offsetX;
|
||||
const rawY = rect ? event.clientY - rect.top : event.offsetY;
|
||||
const maxX = Math.max(8, (rect?.width ?? window.innerWidth) - 192);
|
||||
const maxY = Math.max(8, (rect?.height ?? window.innerHeight) - 92);
|
||||
|
||||
contextBranch = branch;
|
||||
contextMenuX = Math.max(8, Math.min(rawX, maxX));
|
||||
contextMenuY = Math.max(8, Math.min(rawY, maxY));
|
||||
}
|
||||
|
||||
function closeBranchContextMenu() {
|
||||
contextBranch = null;
|
||||
}
|
||||
|
||||
async function renameContextBranch() {
|
||||
const branch = contextBranch;
|
||||
if (!branch || isBusy) return;
|
||||
closeBranchContextMenu();
|
||||
await onRenameBranch(branch);
|
||||
}
|
||||
|
||||
async function deleteContextBranch() {
|
||||
const branch = contextBranch;
|
||||
if (!branch || branch.current || isBusy) return;
|
||||
closeBranchContextMenu();
|
||||
await onDeleteBranch(branch);
|
||||
}
|
||||
|
||||
function handleWindowKeydown(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") closeBranchContextMenu();
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="panel grid grid-rows-[auto_1fr] overflow-hidden" aria-label="Branches">
|
||||
<svelte:window on:click={closeBranchContextMenu} on:keydown={handleWindowKeydown} />
|
||||
|
||||
<section bind:this={panelElement} class="panel branch-panel grid grid-rows-[auto_1fr] overflow-hidden" aria-label="Branches">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<span class="eyebrow">Branches</span>
|
||||
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Refs</h2>
|
||||
</div>
|
||||
<span class="pill pill-count">{branches.length}</span>
|
||||
<div class="branch-head-actions">
|
||||
<button
|
||||
class="branch-create-toggle"
|
||||
type="button"
|
||||
onclick={openCreateForm}
|
||||
disabled={!hasRepository || isBusy}
|
||||
title="Create new branch"
|
||||
aria-label="Create new branch"
|
||||
>
|
||||
<Plus size={14} aria-hidden="true" />
|
||||
</button>
|
||||
<span class="pill pill-count">{branches.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !hasRepository}
|
||||
@@ -37,71 +280,206 @@
|
||||
{:else if branches.length === 0}
|
||||
<p class="blank-state">No branches returned.</p>
|
||||
{:else}
|
||||
<div class="overflow-auto p-2 flex flex-col gap-0">
|
||||
{#if localBranches.length > 0}
|
||||
<div class="branch-group-label">
|
||||
<span>Local</span>
|
||||
<span class="branch-group-count">{localBranches.length}</span>
|
||||
</div>
|
||||
{#each localBranches as branch (branch.name)}
|
||||
{#snippet branchCard()}
|
||||
<article class="branch-row" class:current={branch.current}>
|
||||
<div class="branch-info">
|
||||
<GitBranch size={16} aria-hidden="true" />
|
||||
<div>
|
||||
<strong>{branch.name}</strong>
|
||||
<span>local</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if branch.current}
|
||||
<span class="pill pill-active">Current</span>
|
||||
{:else}
|
||||
<div class="branch-actions">
|
||||
<button class="btn-sm" type="button" onclick={() => onCheckout(branch)} disabled={isBusy}>
|
||||
Checkout
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onMerge(branch)} disabled={isBusy} title="Merge into current">
|
||||
<GitMerge size={15} aria-hidden="true" />
|
||||
Merge
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
{/snippet}
|
||||
{@render branchCard()}
|
||||
{/each}
|
||||
<div class="branch-list overflow-auto p-2 flex flex-col gap-0">
|
||||
{#if createOpen}
|
||||
<form class="branch-create-form" onsubmit={submitCreate}>
|
||||
<GitBranch size={15} aria-hidden="true" />
|
||||
<input
|
||||
bind:this={createInput}
|
||||
bind:value={newBranchName}
|
||||
disabled={isBusy}
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
placeholder="new-branch-name"
|
||||
aria-label="New branch name"
|
||||
/>
|
||||
<button class="branch-create-action confirm" type="submit" disabled={isBusy || newBranchName.trim().length === 0} title="Create branch">
|
||||
<Check size={14} aria-hidden="true" />
|
||||
</button>
|
||||
<button class="branch-create-action" type="button" onclick={closeCreateForm} disabled={isBusy} title="Cancel">
|
||||
<X size={14} aria-hidden="true" />
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if remoteBranches.length > 0}
|
||||
<div class="branch-group-label" style="margin-top: {localBranches.length > 0 ? '12px' : '0'}">
|
||||
<div class="branch-group">
|
||||
<button
|
||||
class="branch-group-toggle"
|
||||
type="button"
|
||||
onclick={() => { localOpen = !localOpen; }}
|
||||
aria-expanded={localOpen}
|
||||
>
|
||||
{#if localOpen}
|
||||
<ChevronDown size={14} aria-hidden="true" />
|
||||
{:else}
|
||||
<ChevronRight size={14} aria-hidden="true" />
|
||||
{/if}
|
||||
<span>Local</span>
|
||||
<span class="branch-group-count">{localBranches.length}</span>
|
||||
</button>
|
||||
|
||||
{#if localOpen}
|
||||
{#if localBranches.length === 0}
|
||||
<div class="branch-empty">No local branches.</div>
|
||||
{:else}
|
||||
{#each localBranchRows as row (row.id)}
|
||||
{#if row.kind === "folder"}
|
||||
<button
|
||||
class="branch-folder-row"
|
||||
class:current={row.current}
|
||||
style={`--branch-indent: ${row.depth * 16}px;`}
|
||||
type="button"
|
||||
onclick={() => toggleBranchFolder(row.id)}
|
||||
aria-expanded={isBranchFolderOpen(row.id)}
|
||||
title={`${row.name} (${row.branchCount})`}
|
||||
>
|
||||
{#if isBranchFolderOpen(row.id)}
|
||||
<ChevronDown size={14} aria-hidden="true" />
|
||||
<FolderOpen size={15} aria-hidden="true" />
|
||||
{:else}
|
||||
<ChevronRight size={14} aria-hidden="true" />
|
||||
<Folder size={15} aria-hidden="true" />
|
||||
{/if}
|
||||
<span class="branch-folder-name">{row.name}</span>
|
||||
<span class="branch-folder-count">{row.branchCount}</span>
|
||||
</button>
|
||||
{:else}
|
||||
<article
|
||||
class="branch-row"
|
||||
class:current={row.branch.current}
|
||||
style={`--branch-indent: ${row.depth * 16}px;`}
|
||||
ondblclick={(event) => checkoutOnDoubleClick(event, row.branch)}
|
||||
oncontextmenu={(event) => openBranchContextMenu(event, row.branch)}
|
||||
title={row.branch.current ? "Current branch" : row.branch.name}
|
||||
>
|
||||
<div class="branch-info">
|
||||
<GitBranch size={16} aria-hidden="true" />
|
||||
<div>
|
||||
<strong>{row.displayName}</strong>
|
||||
<span>{row.scopeLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if row.branch.current}
|
||||
<span class="pill pill-active">Current</span>
|
||||
{:else}
|
||||
<div class="branch-actions">
|
||||
<button class="btn-sm" type="button" onclick={() => onCheckout(row.branch)} disabled={isBusy}>
|
||||
Checkout
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onMerge(row.branch)} disabled={isBusy} title="Merge into current">
|
||||
<GitMerge size={15} aria-hidden="true" />
|
||||
Merge
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="branch-group">
|
||||
<button
|
||||
class="branch-group-toggle"
|
||||
type="button"
|
||||
onclick={() => { remoteOpen = !remoteOpen; }}
|
||||
aria-expanded={remoteOpen}
|
||||
>
|
||||
{#if remoteOpen}
|
||||
<ChevronDown size={14} aria-hidden="true" />
|
||||
{:else}
|
||||
<ChevronRight size={14} aria-hidden="true" />
|
||||
{/if}
|
||||
<span>Remote</span>
|
||||
<span class="branch-group-count">{remoteBranches.length}</span>
|
||||
</div>
|
||||
{#each remoteBranches as branch (branch.name)}
|
||||
<article class="branch-row" class:current={branch.current}>
|
||||
<div class="branch-info">
|
||||
<GitBranch size={16} aria-hidden="true" />
|
||||
<div>
|
||||
<strong>{branch.name}</strong>
|
||||
<span>remote</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if branch.current}
|
||||
<span class="pill pill-active">Current</span>
|
||||
{:else}
|
||||
<div class="branch-actions">
|
||||
<button class="btn-sm" type="button" onclick={() => onCheckout(branch)} disabled={isBusy}>
|
||||
Checkout
|
||||
</button>
|
||||
|
||||
{#if remoteOpen}
|
||||
{#if remoteBranches.length === 0}
|
||||
<div class="branch-empty">No remote branches.</div>
|
||||
{:else}
|
||||
{#each remoteBranchRows as row (row.id)}
|
||||
{#if row.kind === "folder"}
|
||||
<button
|
||||
class="branch-folder-row"
|
||||
class:current={row.current}
|
||||
style={`--branch-indent: ${row.depth * 16}px;`}
|
||||
type="button"
|
||||
onclick={() => toggleBranchFolder(row.id)}
|
||||
aria-expanded={isBranchFolderOpen(row.id)}
|
||||
title={`${row.name} (${row.branchCount})`}
|
||||
>
|
||||
{#if isBranchFolderOpen(row.id)}
|
||||
<ChevronDown size={14} aria-hidden="true" />
|
||||
<FolderOpen size={15} aria-hidden="true" />
|
||||
{:else}
|
||||
<ChevronRight size={14} aria-hidden="true" />
|
||||
<Folder size={15} aria-hidden="true" />
|
||||
{/if}
|
||||
<span class="branch-folder-name">{row.name}</span>
|
||||
<span class="branch-folder-count">{row.branchCount}</span>
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onMerge(branch)} disabled={isBusy} title="Merge into current">
|
||||
<GitMerge size={15} aria-hidden="true" />
|
||||
Merge
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
{/if}
|
||||
{:else}
|
||||
<article
|
||||
class="branch-row"
|
||||
class:current={row.branch.current}
|
||||
style={`--branch-indent: ${row.depth * 16}px;`}
|
||||
ondblclick={(event) => checkoutOnDoubleClick(event, row.branch)}
|
||||
title={row.branch.current ? "Current branch" : row.branch.name}
|
||||
>
|
||||
<div class="branch-info">
|
||||
<GitBranch size={16} aria-hidden="true" />
|
||||
<div>
|
||||
<strong>{row.displayName}</strong>
|
||||
<span>{row.scopeLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if row.branch.current}
|
||||
<span class="pill pill-active">Current</span>
|
||||
{:else}
|
||||
<div class="branch-actions">
|
||||
<button class="btn-sm" type="button" onclick={() => onCheckout(row.branch)} disabled={isBusy}>
|
||||
Checkout
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onMerge(row.branch)} disabled={isBusy} title="Merge into current">
|
||||
<GitMerge size={15} aria-hidden="true" />
|
||||
Merge
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if contextBranch}
|
||||
<div
|
||||
class="branch-context-menu"
|
||||
style={`left: ${contextMenuX}px; top: ${contextMenuY}px;`}
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
aria-label={`Actions for ${contextBranch.name}`}
|
||||
>
|
||||
<button type="button" role="menuitem" onclick={renameContextBranch} disabled={isBusy}>
|
||||
<Pencil size={14} aria-hidden="true" />
|
||||
Rename
|
||||
</button>
|
||||
<button
|
||||
class="danger"
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onclick={deleteContextBranch}
|
||||
disabled={isBusy || contextBranch.current}
|
||||
title={contextBranch.current ? "Current branch cannot be deleted" : "Delete local branch"}
|
||||
>
|
||||
<Trash2 size={14} aria-hidden="true" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
@@ -15,6 +15,8 @@
|
||||
selectedDiffPath: string;
|
||||
isBusy: boolean;
|
||||
restoreLabel?: string;
|
||||
/** When opened from a search hit, the term to highlight on matching lines. */
|
||||
highlightQuery?: string;
|
||||
onClose: () => void;
|
||||
onRestore?: () => void;
|
||||
onSelectFile: (file: GitDiffFile) => void;
|
||||
@@ -25,11 +27,25 @@
|
||||
selectedDiffPath = "",
|
||||
isBusy = false,
|
||||
restoreLabel = "",
|
||||
highlightQuery = "",
|
||||
onClose = () => {},
|
||||
onRestore = undefined,
|
||||
onSelectFile = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
// Needle = first non-empty line of the search query, lowercased for matching.
|
||||
let highlightNeedle = $derived(
|
||||
highlightQuery
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.find((line) => line.length > 0)
|
||||
?.toLowerCase() ?? ""
|
||||
);
|
||||
|
||||
function isMatch(text?: string): boolean {
|
||||
return highlightNeedle.length > 0 && !!text && text.toLowerCase().includes(highlightNeedle);
|
||||
}
|
||||
|
||||
let beforePane = $state<HTMLDivElement | null>(null);
|
||||
let afterPane = $state<HTMLDivElement | null>(null);
|
||||
let isSyncingSplitScroll = false;
|
||||
@@ -259,8 +275,8 @@
|
||||
{#if row.type === "span"}
|
||||
<div class="split-span split-{row.kind}">{row.text}</div>
|
||||
{:else}
|
||||
<div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
|
||||
<div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftText ?? " "}</div>
|
||||
<div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"} class:match={isMatch(row.leftText)}>{row.leftNum ?? ""}</div>
|
||||
<div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"} class:match={isMatch(row.leftText)}>{row.leftText ?? " "}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
@@ -276,8 +292,8 @@
|
||||
{#if row.type === "span"}
|
||||
<div class="split-span split-{row.kind}">{row.text}</div>
|
||||
{:else}
|
||||
<div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
|
||||
<div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightText ?? " "}</div>
|
||||
<div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"} class:match={isMatch(row.rightText)}>{row.rightNum ?? ""}</div>
|
||||
<div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"} class:match={isMatch(row.rightText)}>{row.rightText ?? " "}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { ArrowRight, GitCompare, LoaderCircle, X } from "@lucide/svelte";
|
||||
import type { GitCommit } from "../types";
|
||||
|
||||
interface Props {
|
||||
commits: GitCommit[];
|
||||
compareFrom: string;
|
||||
compareTo: string;
|
||||
canCompare: boolean;
|
||||
isBusy: boolean;
|
||||
operation: string;
|
||||
onCompareFromChange: (val: string) => void;
|
||||
onCompareToChange: (val: string) => void;
|
||||
onCompare: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
commits = [],
|
||||
compareFrom = "",
|
||||
compareTo = "",
|
||||
canCompare = false,
|
||||
isBusy = false,
|
||||
operation = "",
|
||||
onCompareFromChange = () => {},
|
||||
onCompareToChange = () => {},
|
||||
onCompare = () => {},
|
||||
onClose = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
function commitOptionLabel(item: GitCommit): string {
|
||||
return `${item.short_hash} - ${item.summary}`;
|
||||
}
|
||||
|
||||
function handleSubmit(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
onCompare();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="dialog-backdrop"
|
||||
role="presentation"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div class="dialog compare-select-dialog" role="dialog" aria-modal="true" aria-label="Select commits to compare" tabindex="-1">
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
<span class="eyebrow">Compare</span>
|
||||
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Select commits</h2>
|
||||
</div>
|
||||
<button class="dialog-close" type="button" onclick={onClose} title="Close">
|
||||
<X size={18} aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if commits.length < 2}
|
||||
<div class="blank-state">At least two commits are needed to compare.</div>
|
||||
{:else}
|
||||
<form class="compare-form" onsubmit={handleSubmit}>
|
||||
<label class="compare-field">
|
||||
<span>From (older)</span>
|
||||
<select
|
||||
value={compareFrom}
|
||||
onchange={(e) => onCompareFromChange((e.target as HTMLSelectElement).value)}
|
||||
disabled={isBusy}
|
||||
>
|
||||
<option value="" disabled>Select a commit</option>
|
||||
{#each commits as item (item.hash)}
|
||||
<option value={item.hash}>{commitOptionLabel(item)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<ArrowRight class="compare-arrow" size={18} aria-hidden="true" />
|
||||
|
||||
<label class="compare-field">
|
||||
<span>To (newer)</span>
|
||||
<select
|
||||
value={compareTo}
|
||||
onchange={(e) => onCompareToChange((e.target as HTMLSelectElement).value)}
|
||||
disabled={isBusy}
|
||||
>
|
||||
<option value="" disabled>Select a commit</option>
|
||||
{#each commits as item (item.hash)}
|
||||
<option value={item.hash}>{commitOptionLabel(item)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button class="btn-primary" type="submit" disabled={!canCompare}>
|
||||
{#if operation === "Comparing commits"}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<GitCompare size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
Compare
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{#if compareFrom && compareTo && compareFrom === compareTo}
|
||||
<div class="blank-state">Select two different commits to compare.</div>
|
||||
{:else}
|
||||
<div class="blank-state">Pick two commits and run a comparison.</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,6 +8,7 @@
|
||||
selectedExplorerLabel: string;
|
||||
hasRepository: boolean;
|
||||
isBusy: boolean;
|
||||
isLoading?: boolean;
|
||||
onDiff: (commit: GitCommit) => void;
|
||||
onRestore: (commit: GitCommit) => void;
|
||||
}
|
||||
@@ -18,6 +19,7 @@
|
||||
selectedExplorerLabel = "File history",
|
||||
hasRepository = false,
|
||||
isBusy = false,
|
||||
isLoading = false,
|
||||
onDiff = () => {},
|
||||
onRestore = () => {},
|
||||
}: Props = $props();
|
||||
@@ -89,6 +91,25 @@
|
||||
<div class="blank-state">No repository loaded.</div>
|
||||
{:else if !selectedExplorerPath}
|
||||
<div class="blank-state">Select a file in Explorer.</div>
|
||||
{:else if isLoading}
|
||||
<div class="file-history-loading" role="status" aria-live="polite">
|
||||
<svg class="file-history-loading-graph" viewBox="0 0 120 120" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="fhl-line" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#646cff" />
|
||||
<stop offset="100%" stop-color="#41d1ff" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle class="fhl-ring" cx="60" cy="60" r="52" />
|
||||
<path class="fhl-trunk" d="M42 22 L42 98" />
|
||||
<path class="fhl-branch" d="M42 44 C42 62, 82 58, 82 76 L82 88" />
|
||||
<circle class="fhl-node fhl-n1" cx="42" cy="30" r="6" />
|
||||
<circle class="fhl-node fhl-n2" cx="42" cy="60" r="6" />
|
||||
<circle class="fhl-node fhl-n3" cx="82" cy="88" r="6" />
|
||||
<circle class="fhl-node fhl-n4" cx="42" cy="90" r="6" />
|
||||
</svg>
|
||||
<span class="file-history-loading-label">Loading history…</span>
|
||||
</div>
|
||||
{:else if fileHistory.length === 0}
|
||||
<div class="blank-state">No history returned for this selection.</div>
|
||||
{:else}
|
||||
|
||||
@@ -1,6 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { CalendarDays, FileCode, LoaderCircle, Search, User, X } from "@lucide/svelte";
|
||||
import type { GitSearchHit } from "../types";
|
||||
import {
|
||||
CalendarDays,
|
||||
FileCode,
|
||||
FileText,
|
||||
GitCompare,
|
||||
History,
|
||||
LoaderCircle,
|
||||
RotateCcw,
|
||||
Search,
|
||||
User,
|
||||
X,
|
||||
} from "@lucide/svelte";
|
||||
import { languageIconForPath } from "../languageIcons";
|
||||
import type { GitCommit, GitRepositoryFile, GitSearchHit } from "../types";
|
||||
import LanguageIcon from "./LanguageIcon.svelte";
|
||||
|
||||
type SearchTab = "code" | "files";
|
||||
|
||||
interface Props {
|
||||
hasRepository: boolean;
|
||||
@@ -8,9 +23,16 @@
|
||||
isSearching: boolean;
|
||||
error: string;
|
||||
results: GitSearchHit[];
|
||||
files: GitRepositoryFile[];
|
||||
fileHistory: GitCommit[];
|
||||
selectedFilePath: string;
|
||||
onClose: () => void;
|
||||
onSearch: (query: string, caseSensitive: boolean, limit: number) => void | Promise<void>;
|
||||
onCancel: () => void | Promise<void>;
|
||||
onDiff: (hit: GitSearchHit) => void | Promise<void>;
|
||||
onSelectFile: (file: GitRepositoryFile) => void | Promise<void>;
|
||||
onFileHistoryDiff: (commit: GitCommit) => void | Promise<void>;
|
||||
onFileHistoryRestore: (commit: GitCommit) => void | Promise<void>;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -19,16 +41,28 @@
|
||||
isSearching = false,
|
||||
error = "",
|
||||
results = [],
|
||||
files = [],
|
||||
fileHistory = [],
|
||||
selectedFilePath = "",
|
||||
onClose = () => {},
|
||||
onSearch = () => {},
|
||||
onCancel = () => {},
|
||||
onDiff = () => {},
|
||||
onSelectFile = () => {},
|
||||
onFileHistoryDiff = () => {},
|
||||
onFileHistoryRestore = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let activeTab = $state<SearchTab>("code");
|
||||
let query = $state("");
|
||||
let caseSensitive = $state(false);
|
||||
let limit = $state(250);
|
||||
let searchedQuery = $state("");
|
||||
let searched = $state(false);
|
||||
let fileQuery = $state("");
|
||||
|
||||
const fileSearchActive = $derived(fileQuery.trim().length > 0);
|
||||
const fileSearchResults = $derived(filterFiles(files, fileQuery, 200));
|
||||
|
||||
function submit(event?: SubmitEvent) {
|
||||
event?.preventDefault();
|
||||
@@ -54,6 +88,42 @@
|
||||
function displayPath(hit: GitSearchHit): string {
|
||||
return hit.old_file ? `${hit.old_file} -> ${hit.file}` : hit.file;
|
||||
}
|
||||
|
||||
function fileName(path: string): string {
|
||||
return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
|
||||
}
|
||||
|
||||
function folderName(path: string): string {
|
||||
const parts = path.split(/[\\/]/).filter(Boolean);
|
||||
parts.pop();
|
||||
return parts.length > 0 ? parts.join("/") : "Repository root";
|
||||
}
|
||||
|
||||
function filterFiles(source: GitRepositoryFile[], value: string, maxResults: number): GitRepositoryFile[] {
|
||||
const terms = value
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.split(/\s+/)
|
||||
.filter(Boolean);
|
||||
if (terms.length === 0) return [];
|
||||
|
||||
return source
|
||||
.filter((file) => {
|
||||
const path = file.path.toLowerCase();
|
||||
const name = fileName(file.path).toLowerCase();
|
||||
return terms.every((term) => path.includes(term) || name.includes(term));
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const aName = fileName(a.path).toLowerCase();
|
||||
const bName = fileName(b.path).toLowerCase();
|
||||
const first = terms[0] ?? "";
|
||||
const aStarts = aName.startsWith(first) ? 0 : 1;
|
||||
const bStarts = bName.startsWith(first) ? 0 : 1;
|
||||
if (aStarts !== bStarts) return aStarts - bStarts;
|
||||
return a.path.localeCompare(b.path);
|
||||
})
|
||||
.slice(0, maxResults);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -61,11 +131,11 @@
|
||||
role="presentation"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div class="dialog global-search-dialog" role="dialog" aria-modal="true" aria-label="Global code search" tabindex="-1">
|
||||
<div class="dialog global-search-dialog" role="dialog" aria-modal="true" aria-label="Global search" tabindex="-1">
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
<span class="eyebrow">Global search</span>
|
||||
<h2 class="dialog-title">Find where code was introduced</h2>
|
||||
<h2 class="dialog-title">{activeTab === "code" ? "Find where code was introduced" : "Find file history"}</h2>
|
||||
</div>
|
||||
<button class="dialog-close" type="button" onclick={onClose} title="Close">
|
||||
<X size={18} aria-hidden="true" />
|
||||
@@ -73,102 +143,254 @@
|
||||
</header>
|
||||
|
||||
<div class="global-search-body">
|
||||
<form class="global-search-form" onsubmit={submit}>
|
||||
<label class="global-search-query">
|
||||
<span>String or function</span>
|
||||
<textarea
|
||||
bind:value={query}
|
||||
onkeydown={handleKeydown}
|
||||
disabled={!hasRepository || isBusy || isSearching}
|
||||
spellcheck="false"
|
||||
placeholder={"Paste a string, symbol, or full function body..."}
|
||||
></textarea>
|
||||
</label>
|
||||
<div class="global-search-tabs" role="tablist" aria-label="Search mode">
|
||||
<button
|
||||
class="global-search-tab"
|
||||
class:active={activeTab === "code"}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTab === "code"}
|
||||
onclick={() => { activeTab = "code"; }}
|
||||
>
|
||||
<Search size={14} aria-hidden="true" />
|
||||
Code
|
||||
</button>
|
||||
<button
|
||||
class="global-search-tab"
|
||||
class:active={activeTab === "files"}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTab === "files"}
|
||||
onclick={() => { activeTab = "files"; }}
|
||||
>
|
||||
<FileText size={14} aria-hidden="true" />
|
||||
Files
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="global-search-options">
|
||||
<label class="check-row">
|
||||
<input type="checkbox" bind:checked={caseSensitive} disabled={!hasRepository || isBusy || isSearching} />
|
||||
<span>Exact case</span>
|
||||
{#if activeTab === "code"}
|
||||
<form class="global-search-form" onsubmit={submit}>
|
||||
<label class="global-search-query">
|
||||
<span>String or function</span>
|
||||
<textarea
|
||||
bind:value={query}
|
||||
onkeydown={handleKeydown}
|
||||
disabled={!hasRepository || isBusy || isSearching}
|
||||
spellcheck="false"
|
||||
placeholder={"Paste a string, symbol, or full function body..."}
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<label class="search-limit">
|
||||
<span>Results</span>
|
||||
<select bind:value={limit} disabled={!hasRepository || isBusy || isSearching}>
|
||||
<option value={100}>100</option>
|
||||
<option value={250}>250</option>
|
||||
<option value={500}>500</option>
|
||||
<option value={1000}>1000</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="global-search-options">
|
||||
<label class="check-row">
|
||||
<input type="checkbox" bind:checked={caseSensitive} disabled={!hasRepository || isBusy || isSearching} />
|
||||
<span>Exact case</span>
|
||||
</label>
|
||||
|
||||
<button class="btn-primary" type="submit" disabled={!hasRepository || isBusy || isSearching || query.trim().length === 0}>
|
||||
{#if isSearching}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<Search size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
Search
|
||||
</button>
|
||||
<label class="search-limit">
|
||||
<span>Results</span>
|
||||
<select bind:value={limit} disabled={!hasRepository || isBusy || isSearching}>
|
||||
<option value={100}>100</option>
|
||||
<option value={250}>250</option>
|
||||
<option value={500}>500</option>
|
||||
<option value={1000}>1000</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{#if isSearching}
|
||||
<button class="btn-secondary search-cancel" type="button" onclick={onCancel}>
|
||||
<X size={16} aria-hidden="true" />
|
||||
Cancel
|
||||
<button class="btn-primary" type="submit" disabled={!hasRepository || isBusy || isSearching || query.trim().length === 0}>
|
||||
{#if isSearching}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<Search size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
Search
|
||||
</button>
|
||||
|
||||
{#if isSearching}
|
||||
<button class="btn-secondary search-cancel" type="button" onclick={onCancel}>
|
||||
<X size={16} aria-hidden="true" />
|
||||
Cancel
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section class="global-search-results" aria-live="polite">
|
||||
{#if !hasRepository}
|
||||
<div class="blank-state">Open a repository first.</div>
|
||||
{:else if isSearching}
|
||||
<div class="blank-state">
|
||||
<LoaderCircle class="spin" size={20} aria-hidden="true" />
|
||||
Searching all branches...
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="blank-state search-error">{error}</div>
|
||||
{:else if !searched}
|
||||
<div class="blank-state">Search a string or paste a complete function to find where it was added.</div>
|
||||
{:else if results.length === 0}
|
||||
<div class="blank-state">No introduction found for "{searchedQuery}".</div>
|
||||
{:else}
|
||||
<div class="search-result-head">
|
||||
<strong>{results.length}</strong>
|
||||
<span>{results.length === 1 ? "introduction" : "introductions"} found for "{searchedQuery}"</span>
|
||||
</div>
|
||||
|
||||
<div class="search-hit-list">
|
||||
{#each results as hit (`${hit.commit_hash}:${hit.file}:${hit.line_number ?? 0}`)}
|
||||
<article class="search-hit">
|
||||
<header class="search-hit-top">
|
||||
<span class="hash">{hit.short_hash}</span>
|
||||
<strong title={hit.summary}>{hit.summary || "No commit message"}</strong>
|
||||
{#if hit.matches_added > 1}
|
||||
<span class="pill pill-active">+{hit.matches_added} matches</span>
|
||||
{/if}
|
||||
<button
|
||||
class="btn-secondary search-hit-diff"
|
||||
type="button"
|
||||
disabled={isBusy}
|
||||
title={`Compare this version of ${hit.file} with the current version`}
|
||||
onclick={() => onDiff(hit)}
|
||||
>
|
||||
<GitCompare size={14} aria-hidden="true" />
|
||||
DIFF
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="search-hit-meta">
|
||||
<span><User size={12} aria-hidden="true" />{hit.author_name || "Unknown author"}</span>
|
||||
<span><CalendarDays size={12} aria-hidden="true" />{formatCommitDate(hit.date)}</span>
|
||||
</div>
|
||||
|
||||
<div class="search-hit-file" title={displayPath(hit)}>
|
||||
<FileCode size={14} aria-hidden="true" />
|
||||
<span>{displayPath(hit)}</span>
|
||||
{#if hit.line_number}
|
||||
<strong>:{hit.line_number}</strong>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<pre class="search-hit-line">{hit.line || searchedQuery}</pre>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
{:else}
|
||||
<form class="global-search-form file-search-form" onsubmit={(event) => event.preventDefault()}>
|
||||
<label class="global-search-query">
|
||||
<span>File name or path</span>
|
||||
<input
|
||||
bind:value={fileQuery}
|
||||
disabled={!hasRepository || isBusy}
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
placeholder="Search files, folders, extensions..."
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<section class="global-search-results" aria-live="polite">
|
||||
{#if !hasRepository}
|
||||
<div class="blank-state">Open a repository first.</div>
|
||||
{:else if isSearching}
|
||||
<div class="blank-state">
|
||||
<LoaderCircle class="spin" size={20} aria-hidden="true" />
|
||||
Searching all branches...
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="blank-state search-error">{error}</div>
|
||||
{:else if !searched}
|
||||
<div class="blank-state">Search a string or paste a complete function to find where it was added.</div>
|
||||
{:else if results.length === 0}
|
||||
<div class="blank-state">No introduction found for "{searchedQuery}".</div>
|
||||
{:else}
|
||||
<div class="search-result-head">
|
||||
<strong>{results.length}</strong>
|
||||
<span>{results.length === 1 ? "introduction" : "introductions"} found for "{searchedQuery}"</span>
|
||||
</div>
|
||||
<section class="global-search-results file-search-results" aria-live="polite">
|
||||
{#if !hasRepository}
|
||||
<div class="blank-state">Open a repository first.</div>
|
||||
{:else if files.length === 0}
|
||||
<div class="blank-state">No files loaded for this repository.</div>
|
||||
{:else}
|
||||
<div class="file-search-split">
|
||||
<div class="file-search-column">
|
||||
{#if !fileSearchActive}
|
||||
<div class="blank-state">Search a file name or path, then choose a result to show its history.</div>
|
||||
{:else if fileSearchResults.length === 0}
|
||||
<div class="blank-state">No file found for "{fileQuery.trim()}".</div>
|
||||
{:else}
|
||||
<div class="search-result-head">
|
||||
<strong>{fileSearchResults.length}</strong>
|
||||
<span>{fileSearchResults.length === 1 ? "file" : "files"} found for "{fileQuery.trim()}"</span>
|
||||
</div>
|
||||
|
||||
<div class="search-hit-list">
|
||||
{#each results as hit (`${hit.commit_hash}:${hit.file}:${hit.line_number ?? 0}`)}
|
||||
<article class="search-hit">
|
||||
<header class="search-hit-top">
|
||||
<span class="hash">{hit.short_hash}</span>
|
||||
<strong title={hit.summary}>{hit.summary || "No commit message"}</strong>
|
||||
{#if hit.matches_added > 1}
|
||||
<span class="pill pill-active">+{hit.matches_added} matches</span>
|
||||
{/if}
|
||||
<div class="file-search-list">
|
||||
{#each fileSearchResults as file (file.path)}
|
||||
{@const languageIcon = languageIconForPath(file.path)}
|
||||
<button
|
||||
class="file-search-hit"
|
||||
class:active={selectedFilePath === file.path}
|
||||
type="button"
|
||||
disabled={isBusy || isSearching}
|
||||
title={`Show history for ${file.path}`}
|
||||
onclick={() => onSelectFile(file)}
|
||||
>
|
||||
<span class="file-search-icon">
|
||||
{#if languageIcon}
|
||||
<LanguageIcon icon={languageIcon.icon} title={languageIcon.title} />
|
||||
{:else}
|
||||
<FileText size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class="file-search-main">
|
||||
<strong>{fileName(file.path)}</strong>
|
||||
<span>{folderName(file.path)}</span>
|
||||
</span>
|
||||
|
||||
{#if file.status}
|
||||
<small class={`status-badge ${file.status}`}>{file.status}</small>
|
||||
{:else if !file.tracked}
|
||||
<small class="status-badge untracked">untracked</small>
|
||||
{/if}
|
||||
|
||||
<span class="file-search-action">
|
||||
<History size={14} aria-hidden="true" />
|
||||
History
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<aside class="file-search-history" aria-label="Selected file history">
|
||||
<header class="file-search-history-head">
|
||||
<span>History</span>
|
||||
<strong title={selectedFilePath}>{selectedFilePath ? fileName(selectedFilePath) : "No file selected"}</strong>
|
||||
</header>
|
||||
|
||||
<div class="search-hit-meta">
|
||||
<span><User size={12} aria-hidden="true" />{hit.author_name || "Unknown author"}</span>
|
||||
<span><CalendarDays size={12} aria-hidden="true" />{formatCommitDate(hit.date)}</span>
|
||||
</div>
|
||||
{#if !selectedFilePath}
|
||||
<div class="blank-state">Select a file result to load its commit history.</div>
|
||||
{:else if isBusy}
|
||||
<div class="blank-state">
|
||||
<LoaderCircle class="spin" size={18} aria-hidden="true" />
|
||||
Loading history...
|
||||
</div>
|
||||
{:else if fileHistory.length === 0}
|
||||
<div class="blank-state">No history returned for this file.</div>
|
||||
{:else}
|
||||
<div class="file-search-history-list">
|
||||
{#each fileHistory as commit (commit.hash)}
|
||||
<article class="file-search-history-row">
|
||||
<div class="file-search-history-main">
|
||||
<span class="hash">{commit.short_hash}</span>
|
||||
<strong title={commit.summary}>{commit.summary || "No commit message"}</strong>
|
||||
<span>{commit.author_name || "Unknown author"} - {formatCommitDate(commit.date)}</span>
|
||||
</div>
|
||||
|
||||
<div class="search-hit-file" title={displayPath(hit)}>
|
||||
<FileCode size={14} aria-hidden="true" />
|
||||
<span>{displayPath(hit)}</span>
|
||||
{#if hit.line_number}
|
||||
<strong>:{hit.line_number}</strong>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<pre class="search-hit-line">{hit.line || searchedQuery}</pre>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
<div class="file-search-history-actions">
|
||||
<button class="btn-sm" type="button" onclick={() => onFileHistoryDiff(commit)} disabled={isBusy}>
|
||||
<GitCompare size={14} aria-hidden="true" />
|
||||
Diff
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onFileHistoryRestore(commit)} disabled={isBusy}>
|
||||
<RotateCcw size={14} aria-hidden="true" />
|
||||
Restore
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { ChevronDown, ChevronRight, RotateCcw } from "@lucide/svelte";
|
||||
import { ChevronDown, ChevronRight, GitBranch, RotateCcw } from "@lucide/svelte";
|
||||
import type { FileStatusKind, GitCommit, GitCommitFile } from "../types";
|
||||
|
||||
interface GraphSegment {
|
||||
@@ -29,6 +29,7 @@
|
||||
onRestoreCommit: (commit: GitCommit) => void;
|
||||
onPreviewCommitFile: (commit: GitCommit, file: GitCommitFile) => void;
|
||||
onToggleCommitFiles: (hash: string) => void;
|
||||
onCreateBranchFromCommit: (commit: GitCommit) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -39,6 +40,7 @@
|
||||
onRestoreCommit = () => {},
|
||||
onPreviewCommitFile = () => {},
|
||||
onToggleCommitFiles = () => {},
|
||||
onCreateBranchFromCommit = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
function laneColor(col: number): string {
|
||||
@@ -220,6 +222,10 @@
|
||||
<div class="commit-actions">
|
||||
<time datetime={item.date}>{formatCommitDate(item.date)}</time>
|
||||
<div class="commit-action-buttons">
|
||||
<button class="btn-sm" type="button" onclick={() => onCreateBranchFromCommit(item)} disabled={isBusy} title="Create a new branch from this commit">
|
||||
<GitBranch size={15} aria-hidden="true" />
|
||||
Branch
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onRestoreCommit(item)} disabled={isBusy} title="Reset current branch to this commit">
|
||||
<RotateCcw size={15} aria-hidden="true" />
|
||||
Restore
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
<script lang="ts">
|
||||
import { LoaderCircle, X } from "@lucide/svelte";
|
||||
import type { GitFileStatus, PatchApplyAction } from "../types";
|
||||
|
||||
type PatchLineKind = "context" | "add" | "delete" | "meta";
|
||||
|
||||
interface PatchLine {
|
||||
id: string;
|
||||
text: string;
|
||||
kind: PatchLineKind;
|
||||
}
|
||||
|
||||
interface PatchHunk {
|
||||
id: string;
|
||||
header: string;
|
||||
lines: PatchLine[];
|
||||
}
|
||||
|
||||
interface ParsedPatch {
|
||||
headerLines: string[];
|
||||
hunks: PatchHunk[];
|
||||
binary: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
file: GitFileStatus;
|
||||
staged: boolean;
|
||||
patch: string;
|
||||
isBusy: boolean;
|
||||
isLoading: boolean;
|
||||
error: string;
|
||||
onClose: () => void;
|
||||
onRefresh: () => void | Promise<void>;
|
||||
onApply: (action: PatchApplyAction, patch: string) => void | Promise<void>;
|
||||
}
|
||||
|
||||
let {
|
||||
file,
|
||||
staged = false,
|
||||
patch = "",
|
||||
isBusy = false,
|
||||
isLoading = false,
|
||||
error = "",
|
||||
onClose = () => {},
|
||||
onRefresh = () => {},
|
||||
onApply = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let parsed = $state<ParsedPatch>({ headerLines: [], hunks: [], binary: false });
|
||||
|
||||
let scopeLabel = $derived(staged ? "Staged changes" : "Unstaged changes");
|
||||
let displayPath = $derived(file.old_path ? `${file.old_path} -> ${file.path}` : file.path);
|
||||
|
||||
$effect(() => {
|
||||
parsed = parsePatch(patch);
|
||||
});
|
||||
|
||||
function parsePatch(input: string): ParsedPatch {
|
||||
const normalized = input.replace(/\r\n/g, "\n");
|
||||
const lines = normalized.split("\n");
|
||||
if (lines[lines.length - 1] === "") lines.pop();
|
||||
|
||||
const headerLines: string[] = [];
|
||||
const hunks: PatchHunk[] = [];
|
||||
let current: PatchHunk | null = null;
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith("@@ ")) {
|
||||
current = { id: `hunk-${hunks.length}`, header: line, lines: [] };
|
||||
hunks.push(current);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!current) {
|
||||
headerLines.push(line);
|
||||
continue;
|
||||
}
|
||||
|
||||
const kind = patchLineKind(line);
|
||||
current.lines.push({
|
||||
id: `${current.id}-line-${current.lines.length}`,
|
||||
text: line,
|
||||
kind,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
headerLines,
|
||||
hunks,
|
||||
binary: /(^|\n)(Binary files|GIT binary patch|literal \d+)/.test(normalized),
|
||||
};
|
||||
}
|
||||
|
||||
function patchLineKind(line: string): PatchLineKind {
|
||||
if (line.startsWith("+") && !line.startsWith("+++")) return "add";
|
||||
if (line.startsWith("-") && !line.startsWith("---")) return "delete";
|
||||
if (line.startsWith(" ")) return "context";
|
||||
return "meta";
|
||||
}
|
||||
|
||||
function linePrefix(line: PatchLine): string {
|
||||
if (line.kind === "add") return "+";
|
||||
if (line.kind === "delete") return "-";
|
||||
if (line.kind === "meta") return "\\";
|
||||
return " ";
|
||||
}
|
||||
|
||||
function lineBody(line: PatchLine): string {
|
||||
if (line.kind === "meta") return line.text;
|
||||
return line.text.slice(1);
|
||||
}
|
||||
|
||||
function buildHunkPatch(hunk: PatchHunk): string {
|
||||
return `${[...parsed.headerLines, hunk.header, ...hunk.lines.map((line) => line.text)].join("\n")}\n`;
|
||||
}
|
||||
|
||||
async function applyHunkAction(action: PatchApplyAction, hunk: PatchHunk) {
|
||||
if (isBusy || isLoading) return;
|
||||
await onApply(action, buildHunkPatch(hunk));
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="dialog-backdrop" role="presentation">
|
||||
<div class="dialog line-patch-dialog" role="dialog" aria-modal="true" aria-label="Line patch">
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
<span class="eyebrow">{scopeLabel}</span>
|
||||
<p class="dialog-title" title={displayPath}>{displayPath}</p>
|
||||
</div>
|
||||
<div class="dialog-header-actions">
|
||||
<button class="btn-sm" type="button" onclick={onRefresh} disabled={isBusy || isLoading}>Refresh</button>
|
||||
<button class="btn-sm dialog-close" type="button" onclick={onClose} disabled={isBusy} aria-label="Close">
|
||||
<X size={16} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="line-patch-body">
|
||||
{#if isLoading}
|
||||
<div class="blank-state">
|
||||
<LoaderCircle class="spin" size={18} aria-hidden="true" />
|
||||
Loading patch...
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="blank-state">{error}</div>
|
||||
{:else if !patch.trim()}
|
||||
<div class="blank-state">No line patch available for this file.</div>
|
||||
{:else if parsed.binary || parsed.hunks.length === 0}
|
||||
<div class="blank-state">This change cannot be split into text lines.</div>
|
||||
{:else}
|
||||
<div class="line-patch-scroll">
|
||||
{#each parsed.hunks as hunk (hunk.id)}
|
||||
<section class="line-patch-hunk">
|
||||
<div class="line-patch-hunk-head">
|
||||
<code>{hunk.header}</code>
|
||||
<div class="line-patch-hunk-actions">
|
||||
{#if staged}
|
||||
<button class="line-patch-hunk-button discard" type="button" onclick={() => applyHunkAction("discard-staged", hunk)} disabled={isBusy}>
|
||||
Discard Hunk
|
||||
</button>
|
||||
<button class="line-patch-hunk-button unstage" type="button" onclick={() => applyHunkAction("unstage", hunk)} disabled={isBusy}>
|
||||
Unstage Hunk
|
||||
</button>
|
||||
{:else}
|
||||
<button class="line-patch-hunk-button discard" type="button" onclick={() => applyHunkAction("discard-unstaged", hunk)} disabled={isBusy}>
|
||||
Discard Hunk
|
||||
</button>
|
||||
<button class="line-patch-hunk-button stage" type="button" onclick={() => applyHunkAction("stage", hunk)} disabled={isBusy}>
|
||||
Stage Hunk
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line-patch-lines">
|
||||
{#each hunk.lines as line (line.id)}
|
||||
<div class={`line-patch-row ${line.kind}`}>
|
||||
<span class="line-patch-prefix">{linePrefix(line)}</span>
|
||||
<code>{lineBody(line)}</code>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script lang="ts">
|
||||
import { GitBranch, LoaderCircle, X } from "@lucide/svelte";
|
||||
import type { GitCommit } from "../types";
|
||||
|
||||
interface Props {
|
||||
commit: GitCommit;
|
||||
isBusy: boolean;
|
||||
onCreate: (name: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
commit,
|
||||
isBusy = false,
|
||||
onCreate = () => {},
|
||||
onClose = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let name = $state("");
|
||||
|
||||
function submit(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
const value = name.trim();
|
||||
if (!value) return;
|
||||
onCreate(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="dialog-backdrop"
|
||||
role="presentation"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div class="dialog new-branch-dialog" role="dialog" aria-modal="true" aria-label="Create branch from commit" tabindex="-1">
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
<span class="eyebrow">New branch</span>
|
||||
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">From commit</h2>
|
||||
</div>
|
||||
<button class="dialog-close" type="button" onclick={onClose} title="Close">
|
||||
<X size={18} aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<form class="new-branch-form" onsubmit={submit}>
|
||||
<div class="new-branch-target">
|
||||
<span class="hash">{commit.short_hash}</span>
|
||||
<span class="new-branch-summary" title={commit.summary}>{commit.summary}</span>
|
||||
</div>
|
||||
|
||||
<label class="new-branch-field">
|
||||
<span>Branch name</span>
|
||||
<!-- svelte-ignore a11y_autofocus -->
|
||||
<input
|
||||
bind:value={name}
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
placeholder="feature/my-branch"
|
||||
disabled={isBusy}
|
||||
autofocus
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="new-branch-actions">
|
||||
<button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn-primary" type="submit" disabled={isBusy || name.trim().length === 0}>
|
||||
{#if isBusy}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<GitBranch size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
Create branch
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script lang="ts">
|
||||
import { GitBranch, LoaderCircle, X } from "@lucide/svelte";
|
||||
import type { GitBranch as GitBranchInfo } from "../types";
|
||||
|
||||
interface Props {
|
||||
branch: GitBranchInfo;
|
||||
isBusy: boolean;
|
||||
onRename: (name: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
branch,
|
||||
isBusy = false,
|
||||
onRename = () => {},
|
||||
onClose = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let name = $state("");
|
||||
|
||||
$effect(() => {
|
||||
name = branch.name;
|
||||
});
|
||||
|
||||
function submit(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
const value = name.trim();
|
||||
if (!value || value === branch.name) return;
|
||||
onRename(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="dialog-backdrop"
|
||||
role="presentation"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div class="dialog rename-branch-dialog" role="dialog" aria-modal="true" aria-label="Rename branch" tabindex="-1">
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
<span class="eyebrow">Rename branch</span>
|
||||
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">{branch.name}</h2>
|
||||
</div>
|
||||
<button class="dialog-close" type="button" onclick={onClose} title="Close">
|
||||
<X size={18} aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<form class="rename-branch-form" onsubmit={submit}>
|
||||
<label class="new-branch-field">
|
||||
<span>Branch name</span>
|
||||
<!-- svelte-ignore a11y_autofocus -->
|
||||
<input
|
||||
bind:value={name}
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
disabled={isBusy}
|
||||
autofocus
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="new-branch-actions">
|
||||
<button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn-primary" type="submit" disabled={isBusy || name.trim().length === 0 || name.trim() === branch.name}>
|
||||
{#if isBusy}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<GitBranch size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
Rename
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,175 @@
|
||||
<script lang="ts">
|
||||
export let label = "Repository wird geöffnet";
|
||||
export let repoName = "";
|
||||
</script>
|
||||
|
||||
<div class="repo-loading" role="status" aria-live="polite">
|
||||
<div class="repo-loading-card">
|
||||
<!-- Animated git graph: nodes light up in sequence while a branch draws itself -->
|
||||
<svg class="git-graph" viewBox="0 0 120 120" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="gl-line" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#646cff" />
|
||||
<stop offset="100%" stop-color="#41d1ff" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- rotating dashed ring -->
|
||||
<circle class="ring" cx="60" cy="60" r="52" />
|
||||
|
||||
<!-- main trunk -->
|
||||
<path class="trunk" d="M42 22 L42 98" />
|
||||
<!-- branch forking off and merging back -->
|
||||
<path class="branch" d="M42 44 C42 62, 82 58, 82 76 L82 88" />
|
||||
|
||||
<!-- commit nodes -->
|
||||
<circle class="node n1" cx="42" cy="30" r="6" />
|
||||
<circle class="node n2" cx="42" cy="60" r="6" />
|
||||
<circle class="node n3" cx="82" cy="88" r="6" />
|
||||
<circle class="node n4" cx="42" cy="90" r="6" />
|
||||
</svg>
|
||||
|
||||
<div class="repo-loading-text">
|
||||
<span class="repo-loading-label">{label}…</span>
|
||||
{#if repoName}
|
||||
<span class="repo-loading-name" title={repoName}>{repoName}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="repo-loading-bar"><span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.repo-loading {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 400;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(6, 6, 14, 0.72);
|
||||
backdrop-filter: blur(8px);
|
||||
animation: overlay-in 180ms ease;
|
||||
}
|
||||
|
||||
.repo-loading-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 34px 46px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 18px;
|
||||
background: var(--color-surface-raised);
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.git-graph {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.git-graph .ring {
|
||||
fill: none;
|
||||
stroke: rgba(100, 108, 255, 0.22);
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 26 18;
|
||||
transform-origin: 60px 60px;
|
||||
animation: ring-spin 5s linear infinite;
|
||||
}
|
||||
|
||||
.git-graph .trunk,
|
||||
.git-graph .branch {
|
||||
fill: none;
|
||||
stroke: url(#gl-line);
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.git-graph .branch {
|
||||
stroke-dasharray: 90;
|
||||
stroke-dashoffset: 90;
|
||||
animation: branch-draw 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.git-graph .node {
|
||||
fill: var(--color-surface-alt);
|
||||
stroke: url(#gl-line);
|
||||
stroke-width: 4;
|
||||
animation: node-pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
.git-graph .n1 { animation-delay: 0s; }
|
||||
.git-graph .n2 { animation-delay: 0.5s; }
|
||||
.git-graph .n3 { animation-delay: 1s; }
|
||||
.git-graph .n4 { animation-delay: 1.5s; }
|
||||
|
||||
.repo-loading-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.repo-loading-label {
|
||||
color: var(--color-ink);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.repo-loading-name {
|
||||
max-width: 260px;
|
||||
overflow: hidden;
|
||||
color: var(--color-ink-faint);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.repo-loading-bar {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
background: rgba(100, 108, 255, 0.16);
|
||||
}
|
||||
.repo-loading-bar span {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 40%;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
|
||||
animation: bar-slide 1.3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes ring-spin { to { transform: rotate(360deg); } }
|
||||
@keyframes bar-slide {
|
||||
0% { transform: translateX(-120%); }
|
||||
100% { transform: translateX(320%); }
|
||||
}
|
||||
@keyframes branch-draw {
|
||||
0% { stroke-dashoffset: 90; opacity: 0.35; }
|
||||
45% { stroke-dashoffset: 0; opacity: 1; }
|
||||
100% { stroke-dashoffset: 0; opacity: 1; }
|
||||
}
|
||||
@keyframes node-pulse {
|
||||
0%, 100% { fill: var(--color-surface-alt); filter: none; }
|
||||
50% {
|
||||
fill: var(--color-primary);
|
||||
filter: drop-shadow(0 0 6px rgba(100, 108, 255, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.git-graph .ring,
|
||||
.git-graph .branch,
|
||||
.git-graph .node,
|
||||
.repo-loading-bar span { animation: none; }
|
||||
.git-graph .branch { stroke-dashoffset: 0; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Check, RotateCcw, Undo2 } from "@lucide/svelte";
|
||||
import { Check, FileDiff, RotateCcw, Undo2 } from "@lucide/svelte";
|
||||
import type { FileStatusKind, GitFileStatus, GitStatus } from "../types";
|
||||
|
||||
interface Props {
|
||||
@@ -12,6 +12,7 @@
|
||||
onStage: (file: GitFileStatus) => void;
|
||||
onUnstage: (file: GitFileStatus) => void;
|
||||
onDiscard: (file: GitFileStatus, staged: boolean) => void;
|
||||
onPatch: (file: GitFileStatus, staged: boolean) => void;
|
||||
onStageAll: () => void;
|
||||
onUnstageAll: () => void;
|
||||
}
|
||||
@@ -26,6 +27,7 @@
|
||||
onStage = () => {},
|
||||
onUnstage = () => {},
|
||||
onDiscard = () => {},
|
||||
onPatch = () => {},
|
||||
onStageAll = () => {},
|
||||
onUnstageAll = () => {},
|
||||
}: Props = $props();
|
||||
@@ -38,6 +40,18 @@
|
||||
return file.old_path ? `${file.old_path} -> ${file.path}` : file.path;
|
||||
}
|
||||
|
||||
function baseName(path: string): string {
|
||||
return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
|
||||
}
|
||||
|
||||
function fileName(file: GitFileStatus): string {
|
||||
return file.old_path ? `${baseName(file.old_path)} -> ${baseName(file.path)}` : baseName(file.path);
|
||||
}
|
||||
|
||||
function canPatch(kind: FileStatusKind | null): boolean {
|
||||
return kind === "modified";
|
||||
}
|
||||
|
||||
let hasUnstaged = $derived(changedFiles.some((f) => f.unstaged !== null));
|
||||
let hasStaged = $derived(changedFiles.some((f) => f.staged !== null));
|
||||
</script>
|
||||
@@ -90,7 +104,7 @@
|
||||
{#each changedFiles as file (`${file.old_path ?? ""}:${file.path}`)}
|
||||
<article class="file-row">
|
||||
<div class="file-title">
|
||||
<strong title={displayPath(file)}>{displayPath(file)}</strong>
|
||||
<strong title={displayPath(file)}>{fileName(file)}</strong>
|
||||
</div>
|
||||
|
||||
<div class="change-lanes">
|
||||
@@ -105,6 +119,10 @@
|
||||
<Undo2 size={14} aria-hidden="true" />
|
||||
Unstage
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onPatch(file, true)} disabled={isBusy || !canPatch(file.staged)} title="Stage, unstage, or discard selected lines">
|
||||
<FileDiff size={14} aria-hidden="true" />
|
||||
Details
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onDiscard(file, true)} disabled={isBusy} title="Discard staged changes">
|
||||
<RotateCcw size={14} aria-hidden="true" />
|
||||
Discard
|
||||
@@ -126,6 +144,10 @@
|
||||
<Check size={14} aria-hidden="true" />
|
||||
Stage
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onPatch(file, false)} disabled={isBusy || !canPatch(file.unstaged)} title="Stage or discard selected lines">
|
||||
<FileDiff size={14} aria-hidden="true" />
|
||||
Details
|
||||
</button>
|
||||
<button class="btn-sm" type="button" onclick={() => onDiscard(file, false)} disabled={isBusy} title="Discard unstaged changes">
|
||||
<RotateCcw size={14} aria-hidden="true" />
|
||||
Discard
|
||||
|
||||
@@ -8,6 +8,8 @@ import type {
|
||||
GitRepositoryFile,
|
||||
GitSearchHit,
|
||||
GitStatus,
|
||||
PatchApplyAction,
|
||||
RepositoryBundle,
|
||||
StoredCredential,
|
||||
} from "./types";
|
||||
|
||||
@@ -15,6 +17,14 @@ export function openRepository(path: string): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("open_repository", { path });
|
||||
}
|
||||
|
||||
export function openRepoInExplorer(path: string): Promise<void> {
|
||||
return invoke<void>("open_repo_in_explorer", { path });
|
||||
}
|
||||
|
||||
export function openRepositoryBundle(path: string, commitLimit = 100): Promise<RepositoryBundle> {
|
||||
return invoke<RepositoryBundle>("open_repository_bundle", { path, commitLimit });
|
||||
}
|
||||
|
||||
export function getStatus(path: string): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("get_status", { path });
|
||||
}
|
||||
@@ -27,6 +37,26 @@ export function checkoutBranch(path: string, branch: string): Promise<GitStatus>
|
||||
return invoke<GitStatus>("checkout_branch", { path, branch });
|
||||
}
|
||||
|
||||
export function createBranch(
|
||||
path: string,
|
||||
branch: string,
|
||||
startPoint?: string,
|
||||
): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("create_branch", { path, branch, startPoint: startPoint ?? null });
|
||||
}
|
||||
|
||||
export function renameBranch(
|
||||
path: string,
|
||||
oldBranch: string,
|
||||
newBranch: string,
|
||||
): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("rename_branch", { path, oldBranch, newBranch });
|
||||
}
|
||||
|
||||
export function deleteBranch(path: string, branch: string): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("delete_branch", { path, branch });
|
||||
}
|
||||
|
||||
export function stageFiles(path: string, files: string[]): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("stage_files", { path, files });
|
||||
}
|
||||
@@ -43,6 +73,19 @@ export function restoreFiles(
|
||||
return invoke<GitStatus>("restore_files", { path, files, staged });
|
||||
}
|
||||
|
||||
export function getFilePatch(path: string, file: string, staged: boolean): Promise<string> {
|
||||
return invoke<string>("get_file_patch", { path, file, staged });
|
||||
}
|
||||
|
||||
export function applyFilePatch(
|
||||
path: string,
|
||||
file: string,
|
||||
patch: string,
|
||||
action: PatchApplyAction,
|
||||
): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("apply_file_patch", { path, file, patch, action });
|
||||
}
|
||||
|
||||
export function commit(path: string, message: string): Promise<GitStatus> {
|
||||
return invoke<GitStatus>("commit", { path, message });
|
||||
}
|
||||
|
||||
@@ -24,6 +24,8 @@ export interface GitFileStatus {
|
||||
unstaged: FileStatusKind | null;
|
||||
}
|
||||
|
||||
export type PatchApplyAction = "stage" | "unstage" | "discard-unstaged" | "discard-staged";
|
||||
|
||||
export interface GitBranch {
|
||||
name: string;
|
||||
current: boolean;
|
||||
@@ -54,6 +56,13 @@ export interface GitRepositoryFile {
|
||||
status: FileStatusKind | null;
|
||||
}
|
||||
|
||||
export interface RepositoryBundle {
|
||||
status: GitStatus;
|
||||
branches: GitBranch[];
|
||||
commits: GitCommit[];
|
||||
files: GitRepositoryFile[];
|
||||
}
|
||||
|
||||
export interface GitDiffFile {
|
||||
path: string;
|
||||
old_path: string | null;
|
||||
|
||||
Reference in New Issue
Block a user