feat(integrations): support GitHub repositories and enhance repo browser UI

Add GitHub repository support to integrations and update related tests. Implement server-side GitHub API calls and normalize GitHub base URLs. Improve the repository browser UI with compact tabs and updated icons. Add a custom, accessible scrollbar with pointer and keyboard support. - Add paging, auth headers, and error handling when listing GitHub repos. - Default GitHub token username to "x-access-token" when saving credentials. - Introduce compact repo tab styles, new icons, and a draggable scrollbar.
2026-08-29 23:55:27 +02:00
parent 91263547db
commit c242a72edd
9 changed files with 414 additions and 34 deletions
@@ -337,7 +337,7 @@
            <CloudCog size={16} aria-hidden="true" />
            <span>
              <strong>{isGerman ? "Integrationen" : "Integrations"}</strong>
-              <small>GitLab, Azure DevOps & Gitea</small>
+              <small>GitHub, GitLab, Azure DevOps & Gitea</small>
            </span>
            <em>{configuredIntegrationCount(integrationDraft)}</em>
          </button>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy } from "svelte";
+  import { onDestroy, onMount } from "svelte";
  import { open as openDialog } from "@tauri-apps/plugin-dialog";
  import { Cloud, Download, FolderOpen, GitBranch, Globe2, LoaderCircle, LockKeyhole, RefreshCw, Search, X } from "@lucide/svelte";
  import { listIntegrationRepositories } from "../git";
@@ -33,6 +33,17 @@
  let repositoriesBySource = $state<Record<string, GitIntegrationRepository[]>>({});
  let loadingSourceId = $state("");
  let repositoryError = $state("");
+  let repositoryListElement = $state<HTMLDivElement>();
+  let repositoryScrollbarElement = $state<HTMLDivElement>();
+  let repositoryScrollbarVisible = $state(false);
+  let repositoryScrollbarTop = $state(0);
+  let repositoryScrollbarHeight = $state(28);
+  let repositoryScrollTop = $state(0);
+  let repositoryScrollMax = $state(0);
+  let repositoryScrollbarPointerId = $state<number>();
+  let repositoryScrollbarDragY = 0;
+  let repositoryScrollbarDragScrollTop = 0;
+  let repositoryScrollbarFrame: number | undefined;
  let repositoryRequestId = 0;

  const isGerman = $derived(language === "de");
@@ -55,7 +66,100 @@
    if (nextError) errorHideTimer = setTimeout(() => { visibleError = ""; }, 6000);
  });

-  onDestroy(() => { if (errorHideTimer) clearTimeout(errorHideTimer); });
+  $effect(() => {
+    filteredRepositories.length;
+    loadingSourceId;
+    repositoryError;
+    scheduleRepositoryScrollbarUpdate();
+  });
+
+  onMount(() => {
+    window.addEventListener("resize", scheduleRepositoryScrollbarUpdate);
+    return () => window.removeEventListener("resize", scheduleRepositoryScrollbarUpdate);
+  });
+
+  onDestroy(() => {
+    if (errorHideTimer) clearTimeout(errorHideTimer);
+    if (repositoryScrollbarFrame !== undefined) cancelAnimationFrame(repositoryScrollbarFrame);
+  });
+
+  function scheduleRepositoryScrollbarUpdate() {
+    if (repositoryScrollbarFrame !== undefined) cancelAnimationFrame(repositoryScrollbarFrame);
+    repositoryScrollbarFrame = requestAnimationFrame(() => {
+      repositoryScrollbarFrame = undefined;
+      updateRepositoryScrollbar();
+    });
+  }
+
+  function updateRepositoryScrollbar() {
+    const list = repositoryListElement;
+    const track = repositoryScrollbarElement;
+    if (!list || !track) {
+      repositoryScrollbarVisible = false;
+      return;
+    }
+    const scrollMax = Math.max(0, list.scrollHeight - list.clientHeight);
+    const trackHeight = track.clientHeight;
+    const thumbHeight = scrollMax > 0
+      ? Math.max(28, trackHeight * (list.clientHeight / list.scrollHeight))
+      : trackHeight;
+    const thumbTravel = Math.max(0, trackHeight - thumbHeight);
+    repositoryScrollTop = list.scrollTop;
+    repositoryScrollMax = scrollMax;
+    repositoryScrollbarHeight = thumbHeight;
+    repositoryScrollbarTop = scrollMax > 0 ? (list.scrollTop / scrollMax) * thumbTravel : 0;
+    repositoryScrollbarVisible = scrollMax > 1;
+  }
+
+  function startRepositoryScrollbarDrag(event: PointerEvent) {
+    if (!repositoryListElement) return;
+    event.preventDefault();
+    event.stopPropagation();
+    repositoryScrollbarPointerId = event.pointerId;
+    repositoryScrollbarDragY = event.clientY;
+    repositoryScrollbarDragScrollTop = repositoryListElement.scrollTop;
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+  }
+
+  function dragRepositoryScrollbar(event: PointerEvent) {
+    if (repositoryScrollbarPointerId !== event.pointerId || !repositoryListElement || !repositoryScrollbarElement) return;
+    const thumbTravel = repositoryScrollbarElement.clientHeight - repositoryScrollbarHeight;
+    if (thumbTravel <= 0) return;
+    repositoryListElement.scrollTop = repositoryScrollbarDragScrollTop
+      + ((event.clientY - repositoryScrollbarDragY) / thumbTravel) * repositoryScrollMax;
+  }
+
+  function stopRepositoryScrollbarDrag(event: PointerEvent) {
+    if (repositoryScrollbarPointerId !== event.pointerId) return;
+    repositoryScrollbarPointerId = undefined;
+    const target = event.currentTarget as HTMLElement;
+    if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+  }
+
+  function jumpRepositoryScrollbar(event: MouseEvent) {
+    if (event.target !== event.currentTarget || !repositoryListElement || !repositoryScrollbarElement) return;
+    const track = repositoryScrollbarElement.getBoundingClientRect();
+    const thumbTravel = track.height - repositoryScrollbarHeight;
+    if (thumbTravel <= 0) return;
+    const targetTop = Math.max(0, Math.min(thumbTravel, event.clientY - track.top - repositoryScrollbarHeight / 2));
+    repositoryListElement.scrollTop = (targetTop / thumbTravel) * repositoryScrollMax;
+  }
+
+  function handleRepositoryScrollbarKey(event: KeyboardEvent) {
+    if (!repositoryListElement) return;
+    const page = repositoryListElement.clientHeight * 0.85;
+    const changes: Record<string, number> = {
+      ArrowUp: repositoryListElement.scrollTop - 40,
+      ArrowDown: repositoryListElement.scrollTop + 40,
+      PageUp: repositoryListElement.scrollTop - page,
+      PageDown: repositoryListElement.scrollTop + page,
+      Home: 0,
+      End: repositoryScrollMax,
+    };
+    if (!(event.key in changes)) return;
+    event.preventDefault();
+    repositoryListElement.scrollTop = changes[event.key];
+  }

  function directoryNameFromRemoteUrl(url: string): string {
    const trimmed = url.trim().split(/[?#]/, 1)[0]?.replace(/[\\/]+$/g, "") ?? "";
@@ -171,7 +275,7 @@
      {:else}
        <section class="integration-browser" aria-label={isGerman ? "Repositories aus Integrationen" : "Repositories from integrations"}>
          {#if configuredSources.length === 0}
-            <div class="integration-empty"><Cloud size={26} /><strong>{isGerman ? "Keine aktive Integration" : "No active integration"}</strong><p>{isGerman ? "Richte unter Einstellungen → Integrationen zuerst GitLab, Azure DevOps oder Gitea ein." : "Set up GitLab, Azure DevOps, or Gitea under Settings → Integrations first."}</p></div>
+            <div class="integration-empty"><Cloud size={26} /><strong>{isGerman ? "Keine aktive Integration" : "No active integration"}</strong><p>{isGerman ? "Richte unter Einstellungen → Integrationen zuerst GitHub, GitLab, Azure DevOps oder Gitea ein." : "Set up GitHub, GitLab, Azure DevOps, or Gitea under Settings → Integrations first."}</p></div>
          {:else}
            <div class="integration-provider-tabs" role="tablist" aria-label={isGerman ? "Konfigurierte Anbieter" : "Configured providers"}>
              {#each configuredSources as integrationSource}<button type="button" role="tab" aria-selected={selectedSourceId === integrationSource.id} class:active={selectedSourceId === integrationSource.id} onclick={() => loadRepositories(integrationSource)}>{integrationSource.provider === "azure-devops" ? `Azure · ${integrationSource.label}` : integrationSource.label}</button>{/each}
@@ -180,22 +284,50 @@
              <label><Search size={14} /><input bind:value={repositorySearch} placeholder={isGerman ? "Repositories filtern…" : "Filter repositories…"} aria-label={isGerman ? "Repositories filtern" : "Filter repositories"} /></label>
              <button type="button" onclick={() => activeSource && loadRepositories(activeSource, true)} disabled={!activeSource || loadingSourceId.length > 0} title={isGerman ? "Neu laden" : "Refresh"} aria-label={isGerman ? "Repository-Liste neu laden" : "Refresh repository list"}><RefreshCw class={loadingSourceId ? "spin" : ""} size={14} /></button>
            </div>
-            <div class="repository-list" aria-live="polite">
-              {#if loadingSourceId}
-                <div class="repository-state"><LoaderCircle class="spin" size={20} /><span>{isGerman ? "Repositories werden geladen…" : "Loading repositories…"}</span></div>
-              {:else if repositoryError}
-                <div class="repository-state repository-state-error"><strong>{isGerman ? "Repositories konnten nicht geladen werden" : "Could not load repositories"}</strong><span>{repositoryError}</span></div>
-              {:else if filteredRepositories.length === 0}
-                <div class="repository-state"><GitBranch size={20} /><span>{repositorySearch ? (isGerman ? "Keine passenden Repositories." : "No matching repositories.") : (isGerman ? "Keine Repositories gefunden." : "No repositories found.")}</span></div>
-              {:else}
-                {#each filteredRepositories as repository (repository.id)}
-                  <button type="button" class="repository-option" class:selected={selectedRepositoryId === repository.id} onclick={() => selectRepository(repository)}>
-                    <span class="repository-option-icon"><GitBranch size={16} /></span>
-                    <span class="repository-option-copy"><strong>{repository.fullName}</strong><small>{repository.description || repository.cloneUrl}</small></span>
-                    <span class="repository-option-meta">{#if repository.private}<LockKeyhole size={12} aria-label={isGerman ? "Privat" : "Private"} />{/if}{formatUpdatedAt(repository.updatedAt)}</span>
-                  </button>
-                {/each}
-              {/if}
+            <div class="repository-list-shell">
+              <div id="integration-repository-list" class="repository-list" bind:this={repositoryListElement} onscroll={updateRepositoryScrollbar} aria-live="polite">
+                {#if loadingSourceId}
+                  <div class="repository-state"><LoaderCircle class="spin" size={20} /><span>{isGerman ? "Repositories werden geladen…" : "Loading repositories…"}</span></div>
+                {:else if repositoryError}
+                  <div class="repository-state repository-state-error"><strong>{isGerman ? "Repositories konnten nicht geladen werden" : "Could not load repositories"}</strong><span>{repositoryError}</span></div>
+                {:else if filteredRepositories.length === 0}
+                  <div class="repository-state"><GitBranch size={20} /><span>{repositorySearch ? (isGerman ? "Keine passenden Repositories." : "No matching repositories.") : (isGerman ? "Keine Repositories gefunden." : "No repositories found.")}</span></div>
+                {:else}
+                  {#each filteredRepositories as repository (repository.id)}
+                    <button type="button" class="repository-option" class:selected={selectedRepositoryId === repository.id} onclick={() => selectRepository(repository)}>
+                      <span class="repository-option-icon"><GitBranch size={16} /></span>
+                      <span class="repository-option-copy"><strong>{repository.fullName}</strong><small>{repository.description || repository.cloneUrl}</small></span>
+                      <span class="repository-option-meta">{#if repository.private}<LockKeyhole size={12} aria-label={isGerman ? "Privat" : "Private"} />{/if}{formatUpdatedAt(repository.updatedAt)}</span>
+                    </button>
+                  {/each}
+                {/if}
+              </div>
+              <div
+                class="repository-scrollbar"
+                class:visible={repositoryScrollbarVisible}
+                class:dragging={repositoryScrollbarPointerId !== undefined}
+                bind:this={repositoryScrollbarElement}
+                role="scrollbar"
+                tabindex={repositoryScrollbarVisible ? 0 : -1}
+                aria-controls="integration-repository-list"
+                aria-label={isGerman ? "Repository-Liste scrollen" : "Scroll repository list"}
+                aria-orientation="vertical"
+                aria-valuemin="0"
+                aria-valuemax={repositoryScrollMax}
+                aria-valuenow={repositoryScrollTop}
+                onclick={jumpRepositoryScrollbar}
+                onkeydown={handleRepositoryScrollbarKey}
+              >
+                <div
+                  class="repository-scrollbar-thumb"
+                  role="presentation"
+                  style={`height:${repositoryScrollbarHeight}px;transform:translateY(${repositoryScrollbarTop}px)`}
+                  onpointerdown={startRepositoryScrollbarDrag}
+                  onpointermove={dragRepositoryScrollbar}
+                  onpointerup={stopRepositoryScrollbarDrag}
+                  onpointercancel={stopRepositoryScrollbarDrag}
+                ></div>
+              </div>
            </div>
            {#if selectedRepository}<div class="selected-repository"><span>{isGerman ? "Ausgewählt" : "Selected"}</span><strong>{selectedRepository.fullName}</strong><code>{selectedRepository.cloneUrl}</code></div>{/if}
          {/if}
@@ -229,7 +361,16 @@
  .repository-toolbar label > :global(svg) { position: absolute; z-index: 1; top: 10px; left: 10px; color: var(--color-ink-faint); }
  .repository-toolbar input { height: 34px; padding-left: 31px; font-size: 11px; }
  .repository-toolbar button { min-height: 32px; padding: 0; }
-  .repository-list { min-height: 162px; max-height: 250px; overflow: auto; border: 1px solid var(--color-border-subtle); border-radius: 8px; background: var(--color-surface-raised); }
+  .repository-list-shell { position: relative; min-height: 162px; max-height: 250px; overflow: hidden; border: 1px solid var(--color-border-subtle); border-radius: 8px; background: var(--color-surface-raised); }
+  .repository-list { min-height: 160px; max-height: 248px; padding-right: 8px; overflow: auto; scrollbar-width: none; border-radius: inherit; background: transparent; }
+  .repository-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
+  .repository-scrollbar { position: absolute; z-index: 2; top: 3px; right: 1px; bottom: 3px; width: 7px; border-radius: 4px; opacity: 0; pointer-events: none; touch-action: none; transition: opacity 120ms ease; }
+  .repository-scrollbar.visible { opacity: 1; pointer-events: auto; }
+  .repository-scrollbar-thumb { position: absolute; top: 0; right: 2px; width: 3px; min-height: 28px; border-radius: 3px; background: var(--app-scrollbar-thumb); cursor: pointer; transition: width 100ms ease, background 100ms ease; }
+  .repository-scrollbar:hover .repository-scrollbar-thumb,
+  .repository-scrollbar:focus-visible .repository-scrollbar-thumb,
+  .repository-scrollbar.dragging .repository-scrollbar-thumb { right: 1px; width: 4px; background: var(--app-scrollbar-thumb-hover); }
+  .repository-scrollbar:focus-visible { outline: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent); outline-offset: 1px; }
  .repository-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 52px; padding: 7px 9px; border: 0; border-bottom: 1px solid var(--color-border-subtle); border-radius: 0; color: var(--color-ink-dim); background: transparent; text-align: left; }
  .repository-option:last-child { border-bottom: 0; }
  .repository-option:hover { color: var(--color-ink); background: var(--color-surface-hover); }
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { Building2, CheckCircle2, CircleDashed, Eye, EyeOff, KeyRound, Plus, Server, Trash2 } from "@lucide/svelte";
-  import { siGitea, siGitlab, type SimpleIcon } from "simple-icons";
+  import { siGitea, siGithub, siGitlab, type SimpleIcon } from "simple-icons";
  import { gitIntegrationProviders, organizationNameFromUrl, providerLabel } from "../integrations";
  import type { AppLanguage, AzureDevOpsOrganization, GitIntegrationConfig, GitIntegrationProvider, GitIntegrationSecretUpdate, GitIntegrationSettings } from "../types";

@@ -12,7 +12,7 @@
  }

  let { language, settings, onChange, onSecretsChange }: Props = $props();
-  let selected = $state<GitIntegrationProvider>("gitlab");
+  let selected = $state<GitIntegrationProvider>("github");
  let selectedAzureOrganizationId = $state("");
  let tokenValues = $state<Record<string, string>>({});
  let secretUpdates = $state<Record<string, GitIntegrationSecretUpdate>>({});
@@ -27,15 +27,19 @@
    title: "Azure DevOps", slug: "azuredevops", hex: "0078D4", source: "https://azure.microsoft.com/products/devops", svg: "",
    path: "M0 8.877 2.247 5.91l8.405-3.416v19.127l-8.405-3.53L0 15.123V8.877Zm12.154-6.968 11.846 2.423v15.336l-11.846 2.423V1.909Z",
  };
-  const providerIcons: Record<GitIntegrationProvider, SimpleIcon> = { gitlab: siGitlab, "gitlab-self-hosted": siGitlab, "azure-devops": azureDevOpsIcon, gitea: siGitea };
+  const providerIcons: Record<GitIntegrationProvider, SimpleIcon> = { github: siGithub, gitlab: siGitlab, "gitlab-self-hosted": siGitlab, "azure-devops": azureDevOpsIcon, gitea: siGitea };

  function providerDescription(provider: GitIntegrationProvider): string {
    const descriptions = isGerman
-      ? { gitlab: "Cloud-Konto auf gitlab.com", "gitlab-self-hosted": "Eigene GitLab-Instanz", "azure-devops": "Mehrere Organisationen", gitea: "Cloud- oder eigene Instanz" }
-      : { gitlab: "Cloud account on gitlab.com", "gitlab-self-hosted": "Your own GitLab instance", "azure-devops": "Multiple organizations", gitea: "Cloud or self-hosted instance" };
+      ? { github: "Konto auf github.com", gitlab: "Cloud-Konto auf gitlab.com", "gitlab-self-hosted": "Eigene GitLab-Instanz", "azure-devops": "Mehrere Organisationen", gitea: "Cloud- oder eigene Instanz" }
+      : { github: "Cloud account on github.com", gitlab: "Cloud account on gitlab.com", "gitlab-self-hosted": "Your own GitLab instance", "azure-devops": "Multiple organizations", gitea: "Cloud or self-hosted instance" };
    return descriptions[provider];
  }

+  function providerColor(provider: GitIntegrationProvider): string {
+    return provider === "github" ? "var(--color-ink)" : `#${providerIcons[provider].hex}`;
+  }
+
  function secretId(provider: GitIntegrationProvider, accountId?: string): string {
    return accountId ? `${provider}:${accountId}` : provider;
  }
@@ -150,6 +154,7 @@

  function baseUrlPlaceholder(): string {
    if (selected === "azure-devops") return "https://dev.azure.com/meine-organisation";
+    if (selected === "github") return "https://github.com";
    if (selected === "gitlab") return "https://gitlab.com";
    if (selected === "gitlab-self-hosted") return "https://gitlab.example.com";
    return "https://gitea.example.com";
@@ -160,7 +165,7 @@
  <div class="integration-providers" role="tablist" aria-label={isGerman ? "Git-Anbieter" : "Git providers"}>
    {#each gitIntegrationProviders as provider}
      <button type="button" role="tab" aria-selected={selected === provider} class:active={selected === provider} onclick={() => selectProvider(provider)}>
-        <span class="provider-logo" style={`--provider-color:#${providerIcons[provider].hex}`}><svg viewBox="0 0 24 24" aria-hidden="true"><path d={providerIcons[provider].path} /></svg></span>
+        <span class="provider-logo" style={`--provider-color:${providerColor(provider)}`}><svg viewBox="0 0 24 24" aria-hidden="true"><path d={providerIcons[provider].path} /></svg></span>
        <span class="provider-copy"><strong>{providerLabel(provider)}</strong><small>{providerDescription(provider)}</small></span>
        <span class="provider-state" class:configured={isConfigured(provider)} title={isConfigured(provider) ? (isGerman ? "Konfiguriert" : "Configured") : (isGerman ? "Nicht verbunden" : "Not connected")}></span>
      </button>
@@ -169,7 +174,7 @@

  <section class="integration-config" aria-label={`${providerLabel(selected)} ${isGerman ? "konfigurieren" : "configuration"}`}>
    <header class="integration-summary">
-      <span class="provider-logo provider-logo-large" style={`--provider-color:#${providerIcons[selected].hex}`}><svg viewBox="0 0 24 24" aria-hidden="true"><path d={providerIcons[selected].path} /></svg></span>
+      <span class="provider-logo provider-logo-large" style={`--provider-color:${providerColor(selected)}`}><svg viewBox="0 0 24 24" aria-hidden="true"><path d={providerIcons[selected].path} /></svg></span>
      <div><h4>{providerLabel(selected)}</h4><p>{providerDescription(selected)}</p></div>
      {#if selected === "azure-devops"}
        <span class="integration-status" class:configured={isConfigured(selected)}><Building2 size={13} />{settings.azureDevOpsOrganizations.length} {isGerman ? "Orgas" : "orgs"}</span>