style(ui): Move Buttons under the Repo selection

2026-07-11 18:04:49 +02:00
parent a6e7e991dd
commit fdbff8175e
4 changed files with 259 additions and 218 deletions
@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { CloudDownload, Download, FolderOpen, GitCompare, History, ListRestart, LoaderCircle, RefreshCw, Search, Upload } from "@lucide/svelte";
+
+  export let hasRepository: boolean = false;
+  export let isBusy: boolean = false;
+  export let operation: string = "";
+  export let autoRefreshEnabled: boolean = true;
+  export let autoRefreshInFlight: boolean = false;
+  export let onFetch: () => void = () => {};
+  export let onPull: () => void = () => {};
+  export let onPush: () => void = () => {};
+  export let onRefresh: () => void = () => {};
+  export let onSearch: () => void = () => {};
+  export let onCompare: () => void = () => {};
+  export let onInteractiveRebase: () => void = () => {};
+  export let onReflog: () => void = () => {};
+  export let onOpenInExplorer: () => void = () => {};
+  export let onToggleAutoRefresh: () => void = () => {};
+</script>
+
+<div class="repo-toolbar" 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}
+    disabled={!hasRepository || isBusy}
+    title="Global search"
+    aria-label="Global search"
+  >
+    <Search size={14} aria-hidden="true" />
+    <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={onInteractiveRebase}
+    disabled={!hasRepository || isBusy}
+    title="Interactive rebase"
+    aria-label="Interactive rebase"
+  >
+    <ListRestart size={14} aria-hidden="true" />
+    <span class="tb-action-label">Rebase</span>
+  </button>
+
+  <button
+    class="tb-action"
+    onclick={onReflog}
+    disabled={!hasRepository || isBusy}
+    title="Reflog"
+    aria-label="Reflog"
+  >
+    <History size={14} aria-hidden="true" />
+    <span class="tb-action-label">Reflog</span>
+  </button>
+
+  <div class="titlebar-divider" aria-hidden="true"></div>
+
+  <button
+    class="tb-action"
+    onclick={onFetch}
+    disabled={!hasRepository || isBusy}
+    title="Fetch"
+    aria-label="Fetch"
+  >
+    {#if operation === "Fetching"}
+      <LoaderCircle class="spin" size={14} aria-hidden="true" />
+    {:else}
+      <CloudDownload size={14} aria-hidden="true" />
+    {/if}
+    <span class="tb-action-label">Fetch</span>
+  </button>
+
+  <button
+    class="tb-action"
+    onclick={onPull}
+    disabled={!hasRepository || isBusy}
+    title="Pull"
+    aria-label="Pull"
+  >
+    {#if operation === "Pulling"}
+      <LoaderCircle class="spin" size={14} aria-hidden="true" />
+    {:else}
+      <Download size={14} aria-hidden="true" />
+    {/if}
+    <span class="tb-action-label">Pull</span>
+  </button>
+
+  <button
+    class="tb-action"
+    onclick={onPush}
+    disabled={!hasRepository || isBusy}
+    title="Push"
+    aria-label="Push"
+  >
+    {#if operation === "Pushing"}
+      <LoaderCircle class="spin" size={14} aria-hidden="true" />
+    {:else}
+      <Upload size={14} aria-hidden="true" />
+    {/if}
+    <span class="tb-action-label">Push</span>
+  </button>
+
+  <div class="titlebar-divider" aria-hidden="true"></div>
+
+  <button
+    class="tb-action"
+    onclick={onRefresh}
+    disabled={isBusy || !hasRepository}
+    title="Refresh"
+    aria-label="Refresh"
+  >
+    <RefreshCw
+      class={operation === "Refreshing" ? "spin" : ""}
+      size={14}
+      aria-hidden="true"
+    />
+    <span class="tb-action-label">Refresh</span>
+  </button>
+
+  <button
+    class="tb-action auto-toggle"
+    class:active={autoRefreshEnabled}
+    onclick={onToggleAutoRefresh}
+    aria-pressed={autoRefreshEnabled}
+    title={autoRefreshEnabled ? "Auto-refresh on — click to disable" : "Auto-refresh off — click to enable"}
+    aria-label="Toggle auto-refresh"
+  >
+    <RefreshCw
+      class={autoRefreshInFlight ? "spin" : ""}
+      size={14}
+      aria-hidden="true"
+    />
+    <span class="tb-action-label">Auto</span>
+  </button>
+</div>