Merge pull request #2583 from gitbutlerapp/collapsable-lane-with-pers…

…istence

persist lane collapsed state in local storage

gitbutler-ui/src/lib/components/ActiveBranchStatus.svelte

@@ -2,14 +2,15 @@
  import Tag from '$lib/components/Tag.svelte';
  import { normalizeBranchName } from '$lib/utils/branch';
  import { open } from '@tauri-apps/api/shell';
+ import type { Persisted } from '$lib/persisted/persisted';
  import type { BaseBranch, Branch } from '$lib/vbranches/types';
 
  export let base: BaseBranch | undefined | null;
  export let branch: Branch;
  export let prUrl: string | undefined;
  export let isUnapplied = false;
  export let hasIntegratedCommits = false;
- export let isLaneCollapsed = false;
+ export let isLaneCollapsed: Persisted<boolean>;
 </script>
 
 {#if !branch.upstream}
@@ -19,42 +20,40 @@
  color="light"
  help="These changes are stashed away from your working directory."
  reversedDirection
- verticalOrientation={isLaneCollapsed}>unapplied</Tag
+ verticalOrientation={$isLaneCollapsed}>unapplied</Tag
  >
  {:else if hasIntegratedCommits}
  <Tag
  icon="pr-small"
  color="success"
  help="These changes have been integrated upstream, update your workspace to make this lane disappear."
  reversedDirection
- verticalOrientation={isLaneCollapsed}>Integrated</Tag
+ verticalOrientation={$isLaneCollapsed}>Integrated</Tag
  >
  {:else}
  <Tag
  icon="virtual-branch-small"
  color="light"
  help="These changes are in your working directory."
  reversedDirection
- verticalOrientation={isLaneCollapsed}>Virtual</Tag
+ verticalOrientation={$isLaneCollapsed}>Virtual</Tag
  >
  {/if}
  {#if !isUnapplied}
  <Tag
  disabled
  help="Branch name that will be used when pushing. You can change it from the lane menu."
- verticalOrientation={isLaneCollapsed}
+ verticalOrientation={$isLaneCollapsed}
  >
- origin/{branch.upstreamName
- ? branch.upstreamName
- : normalizeBranchName(branch.name)}</Tag
+ origin/{branch.upstreamName ? branch.upstreamName : normalizeBranchName(branch.name)}</Tag
  >
  {/if}
 {:else}
  <Tag
  color="dark"
  icon="remote-branch-small"
  help="At least some of your changes have been pushed"
- verticalOrientation={isLaneCollapsed}
+ verticalOrientation={$isLaneCollapsed}
  reversedDirection>Remote</Tag
  >
  <Tag
@@ -63,23 +62,23 @@
  border
  clickable
  shrinkable
- verticalOrientation={isLaneCollapsed}
+ verticalOrientation={$isLaneCollapsed}
  on:click={(e) => {
  const url = base?.branchUrl(branch.upstream?.name);
  if (url) open(url);
  e.preventDefault();
  e.stopPropagation();
  }}
  >
- {isLaneCollapsed ? 'View branch' : `origin/${branch.upstream?.name}`}
+ {$isLaneCollapsed ? 'View branch' : `origin/${branch.upstream?.name}`}
  </Tag>
  {#if prUrl}
  <Tag
  icon="pr-small"
  color="ghost"
  border
  clickable
- verticalOrientation={isLaneCollapsed}
+ verticalOrientation={$isLaneCollapsed}
  on:click={(e) => {
  const url = prUrl;
  if (url) open(url);

gitbutler-ui/src/lib/components/BranchCard.svelte

@@ -7,6 +7,7 @@
  import ImgThemed from '$lib/components/ImgThemed.svelte';
  import Resizer from '$lib/components/Resizer.svelte';
  import { projectAiGenEnabled } from '$lib/config/config';
+ import { projectLaneCollapsed } from '$lib/config/config';
  import {
  isDraggableFile,
  isDraggableHunk,
@@ -49,10 +50,7 @@
  let rsViewport: HTMLElement;
 
  const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
- const defaultBranchWidthRem = persisted<number | undefined>(
- 24,
- 'defaulBranchWidth' + project.id
- );
+ const defaultBranchWidthRem = persisted<number | undefined>(24, 'defaulBranchWidth' + project.id);
  const laneWidthKey = 'laneWidth_';
 
  let laneWidth: number;
@@ -130,10 +128,10 @@
  }
  }
 
- let isLaneCollapsed: boolean;
+ $: isLaneCollapsed = projectLaneCollapsed(project.id, branch.id);
 </script>
 
-{#if isLaneCollapsed}
+{#if $isLaneCollapsed}
  <div class="collapsed-lane-wrapper">
  <BranchHeader
  {isUnapplied}

gitbutler-ui/src/lib/components/BranchHeader.svelte

@@ -17,6 +17,7 @@
  import type { BranchService } from '$lib/branches/service';
  import type { GitHubService } from '$lib/github/service';
  import type { PrStatus } from '$lib/github/types';
+ import type { Persisted } from '$lib/persisted/persisted';
  import type { BranchController } from '$lib/vbranches/branchController';
  import type { BaseBranch, Branch } from '$lib/vbranches/types';
  import type iconsJson from '../icons/icons.json';
@@ -29,7 +30,7 @@
  export let branchService: BranchService;
  export let projectId: string;
 
- export let isLaneCollapsed = false;
+ export let isLaneCollapsed: Persisted<boolean>;
 
  export let githubService: GitHubService;
  $: pr$ = githubService.get(branch.upstreamName);
@@ -122,7 +123,7 @@
  $: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
 </script>
 
-{#if isLaneCollapsed}
+{#if $isLaneCollapsed}
  <div class="card collapsed-lane" data-tauri-drag-region>
  <div class="collapsed-lane__actions">
  <div class="collapsed-lane__draggable" data-drag-handle>
@@ -134,7 +135,7 @@
  color="neutral"
  help="Collapse lane"
  on:click={() => {
- isLaneCollapsed = false;
+ $isLaneCollapsed = false;
  }}
  />
  </div>
@@ -175,6 +176,7 @@
  {branch}
  {isUnapplied}
  {hasIntegratedCommits}
+ {isLaneCollapsed}
  prUrl={$pr$?.htmlUrl}
  />
  <!-- {#if !branch.upstream}
@@ -387,7 +389,7 @@
  color="neutral"
  help="Collapse lane"
  on:click={() => {
- isLaneCollapsed = true;
+ $isLaneCollapsed = true;
  }}
  />
  <Button

gitbutler-ui/src/lib/components/BranchHeaderSecondaryActions.svelte

@@ -2,10 +2,11 @@
  import BranchLanePopupMenu from './BranchLanePopupMenu.svelte';
  import { clickOutside } from '$lib/clickOutside';
  import Button from '$lib/components/Button.svelte';
+ import type { Persisted } from '$lib/persisted/persisted';
  import type { BranchController } from '$lib/vbranches/branchController';
  import type { Branch } from '$lib/vbranches/types';
 
- export let isLaneCollapsed = false;
+ export let isLaneCollapsed: Persisted<boolean>;
  export let visible = false;
 
  export let isUnapplied = false;
@@ -18,12 +19,12 @@
 
 <div style="display: contents;">
  <Button
- icon={isLaneCollapsed ? 'unfold-lane' : 'fold-lane'}
+ icon={$isLaneCollapsed ? 'unfold-lane' : 'fold-lane'}
  kind="outlined"
  color="neutral"
- help={isLaneCollapsed ? 'Expand lane' : 'Collapse lane'}
+ help={$isLaneCollapsed ? 'Expand lane' : 'Collapse lane'}
  on:click={() => {
- isLaneCollapsed = !isLaneCollapsed;
+ $isLaneCollapsed = !$isLaneCollapsed;
  }}
  />
  <Button

gitbutler-ui/src/lib/components/BranchLane.svelte

@@ -103,9 +103,7 @@
  selectable={$commitBoxOpen && !isUnapplied}
  on:close={() => {
  const selectedId = selected?.id;
- selectedFiles.update((fileIds) =>
- fileIds.filter((file) => file.id != selectedId)
- );
+ selectedFiles.update((fileIds) => fileIds.filter((file) => file.id != selectedId));
  }}
  />
  <Resizer

gitbutler-ui/src/lib/config/config.ts

@@ -40,3 +40,8 @@ export function projectRunCommitHooks(projectId: string): Persisted<boolean> {
  const key = 'projectRunCommitHooks_';
  return persisted(false, key + projectId);
 }
+
+export function projectLaneCollapsed(projectId: string, laneId: string): Persisted<boolean> {
+ const key = 'projectLaneCollapsed_';
+ return persisted(false, key + projectId + '_' + laneId);
+}