gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-28 04:47:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Redid branch page

Browse Source
This commit is contained in:
Caleb Owens 2024-08-01 16:28:37 +02:00
parent e9d1192b6d
commit bbcfbbd72b
5 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/desktop/src/lib/branches/branchListing.ts
View File

@ -1,7 +1,9 @@
// Class transformers will bust a gut if this isn't imported first
import 'reflect-metadata';
import { invoke } from '$lib/backend/ipc';
import { persisted } from '$lib/persisted/persisted';
import { Transform, Type } from 'class-transformer';
import { plainToInstance } from 'class-transformer';
import { Transform, Type, plainToInstance } from 'class-transformer';
import { derived, writable, type Readable, type Writable } from 'svelte/store';
const FILTER_STORAGE_KEY = 'branchListingService-selectedFilter';
@ -20,9 +22,10 @@ export class BranchListingService {
([_, selectedFilter], set) => {
// You're not supposed to have an async return type, so we can't use an async function
this.list(selectedFilter).then((listedValues) => {
set(listedValues);
set(listedValues || []);
});
}
},
[] as BranchListing[]
);
}

4
apps/desktop/src/lib/components/BranchPreview.svelte
View File

@ -21,8 +21,8 @@
import { writable } from 'svelte/store';
import type { PullRequest } from '$lib/gitHost/interface/types';
export let localBranch: Branch | undefined;
export let remoteBranch: Branch | undefined;
export let localBranch: Branch | undefined = undefined;
export let remoteBranch: Branch | undefined = undefined;
export let pr: PullRequest | undefined;
const project = getContext(Project);

2
apps/desktop/src/lib/navigation/BranchListingSidebarEntry.svelte
View File

@ -20,10 +20,10 @@
const { branchListing }: Props = $props();
const gitHostListingService = getGitHostListingService();
const branchListingService = getContext(BranchListingService);
const project = getContext(Project);
const gitHostListingService = getGitHostListingService();
const prs = $derived($gitHostListingService?.prs);
const pr = $derived($prs?.find((pr) => pr.sourceBranch === branchListing.name));

40
apps/desktop/src/lib/navigation/BranchesNew.svelte
View File

@ -1,22 +1,21 @@
<script lang="ts">
// import BranchItemNew from './BranchItemNew.svelte';
import BranchesHeaderNew from './BranchesHeaderNew.svelte';
import noBranchesSvg from '$lib/assets/empty-state/no-branches.svg?raw';
import { BranchListing, BranchListingService } from '$lib/branches/branchListing';
import { BranchListingService } from '$lib/branches/branchListing';
import { getGitHostListingService } from '$lib/gitHost/interface/gitHostListingService';
import SmartSidebarEntry from '$lib/navigation/BranchListingSidebarEntry.svelte';
import PullRequestSidebarEntry from '$lib/navigation/PullRequestSidebarEntry.svelte';
import { getEntryUpdatedDate, type SidebarEntrySubject } from '$lib/navigation/types';
import ScrollableContainer from '$lib/shared/ScrollableContainer.svelte';
import { getContext } from '$lib/utils/context';
import PullRequestSidebarEntry from '$lib/navigation/PullRequestSidebarEntry.svelte';
import Segment from '@gitbutler/ui/SegmentControl/Segment.svelte';
import SegmentControl from '@gitbutler/ui/SegmentControl/SegmentControl.svelte';
const branchListingService = getContext(BranchListingService);
const gitHostListingService = getGitHostListingService();
const pullRequestsStore = $derived($gitHostListingService?.prs);
const branchesStore = branchListingService.branchListings;
$inspect($branchesStore);
const branchListings = $derived($branchesStore || []);
const branchListingService = getContext(BranchListingService);
const branchListings = branchListingService.branchListings;
let sidebarEntries = $state<SidebarEntrySubject[]>([]);
let searchedBranches = $derived(sidebarEntries);
@ -25,7 +24,7 @@
const pullRequests = $pullRequestsStore || [];
const branchListingNames = new Set<string>(
branchListings.map((branchListing) => branchListing.name)
$branchListings.map((branchListing) => branchListing.name)
);
let output: SidebarEntrySubject[] = [];
@ -37,7 +36,7 @@
);
output.push(
...branchListings.map(
...$branchListings.map(
(branchListing): SidebarEntrySubject => ({ type: 'branchListing', subject: branchListing })
)
);
@ -108,23 +107,16 @@
<div class="branches">
<BranchesHeaderNew
totalBranchCount={branchListings.length}
totalBranchCount={$branchListings.length}
filteredBranchCount={searchedBranches?.length}
onSearch={(value) => (searchValue = value)}
>
<!-- {#snippet filterButton()}
<FilterButton
{filtersActive}
{includePrs}
{includeRemote}
{hideBots}
{hideInactive}
showPrCheckbox={!!$gitHost}
on:action
/>
{/snippet} -->
</BranchesHeaderNew>
{#if branchListings.length > 0}
></BranchesHeaderNew>
<SegmentControl fullWidth selectedIndex={0}>
<Segment id="all">All</Segment>
<Segment id="mine">PRs</Segment>
<Segment id="active">Mine</Segment>
</SegmentControl>
{#if $branchListings.length > 0}
{#if searchedBranches.length > 0}
<ScrollableContainer
bind:viewport

66
apps/desktop/src/routes/[projectId]/branch/[...name]/+page.svelte
View File

@ -1,35 +1,51 @@
<script lang="ts">
// This page is displayed when:
// - A remote branch is found
// - And it does NOT have a cooresponding vbranch
// It may also display details about a cooresponding pr if they exist
import { getBranchServiceStore } from '$lib/branches/service';
import RemoteBranchPreview from '$lib/components/BranchPreview.svelte';
import { BranchListingService } from '$lib/branches/branchListing';
import BranchPreview from '$lib/components/BranchPreview.svelte';
import FullviewLoading from '$lib/components/FullviewLoading.svelte';
import { getGitHostListingService } from '$lib/gitHost/interface/gitHostListingService';
import { RemoteBranchService } from '$lib/stores/remoteBranches';
import { getContext } from '$lib/utils/context';
import { groupBy } from '$lib/utils/groupBy';
import type { Branch } from '$lib/vbranches/types';
import { page } from '$app/stores';
const branchService = getBranchServiceStore();
const branches = $derived($branchService?.branches);
const error = $derived($branchService?.error);
// Search for remote branch first as there may be multiple combined branches
// which have the same local branch
const branch = $derived(
$branches?.find((cb) => cb.remoteBranch?.name === $page.params.name) ||
$branches?.find((cb) => cb.localBranch?.name === $page.params.name)
);
// $: branch = $branches?.find((b) => b.displayName === $page.params.name);
const branchListingService = getContext(BranchListingService);
const branchListings = branchListingService.branchListings;
const remoteBranchService = getContext(RemoteBranchService);
const branches = remoteBranchService.branches;
const branchesByGivenName = $derived(groupBy($branches, (branch) => branch.givenName));
const branchListing = $derived($branchListings.find((bl) => bl.name === $page.params.name));
const gitHostListingService = getGitHostListingService();
const prs = $derived($gitHostListingService?.prs);
const pr = $derived($prs?.find((pr) => pr.sourceBranch === branchListing?.name));
let localBranch = $state<Branch>();
let remoteBranches = $state<Branch[]>([]);
$effect(() => {
if (branchListing) {
const branchesWithGivenName = branchesByGivenName[branchListing.name];
localBranch = branchesWithGivenName.find((branch) => !branch.isRemote);
remoteBranches = branchesWithGivenName.filter((branch) => branch.isRemote);
}
});
</script>
{#if $error}
<p>Error...</p>
{:else if !$branches}
{#if $branchListings.length === 0}
<FullviewLoading />
{:else if branch?.remoteBranch || branch?.localBranch}
<RemoteBranchPreview
localBranch={branch?.localBranch}
remoteBranch={branch?.remoteBranch}
pr={branch.pr}
/>
{:else if branchListing}
{#if remoteBranches.length === 0 && localBranch}
<BranchPreview {localBranch} {pr} />
{:else}
{#each remoteBranches as remoteBranch}
<BranchPreview {localBranch} {remoteBranch} {pr} />
{/each}
{/if}
{:else}
<p>Branch doesn't seem to exist</p>
{/if}