From af907c2902f2919bc6e38ee54a54bc04555e9032 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Sat, 17 Feb 2024 02:17:01 +0100
Subject: [PATCH] remove code duplication, `readonly` state for file list tree
 fixed

---
 .../src/lib/components/BranchCard.svelte      | 15 ++++-
 .../src/lib/components/BranchFiles.svelte     | 44 ++++++--------
 .../src/lib/components/CommitCard.svelte      | 60 ++++---------------
 .../src/lib/components/FileTree.svelte        |  4 ++
 .../src/lib/components/TreeListFile.svelte    |  3 +-
 5 files changed, 48 insertions(+), 78 deletions(-)

diff --git a/gitbutler-ui/src/lib/components/BranchCard.svelte b/gitbutler-ui/src/lib/components/BranchCard.svelte
index 19f02607a..d5c09a463 100644
--- a/gitbutler-ui/src/lib/components/BranchCard.svelte
+++ b/gitbutler-ui/src/lib/components/BranchCard.svelte
@@ -203,12 +203,25 @@
 				<DropzoneOverlay class="lane-dz-marker" label="Move here" />
 				{#if branch.files?.length > 0}
 					<div class="card">
+						{#if branch.active && branch.conflicted}
+							<div class="mb-2 bg-red-500 p-2 font-bold text-white">
+								{#if branch.files.some((f) => f.conflicted)}
+									This virtual branch conflicts with upstream changes. Please resolve all conflicts
+									and commit before you can continue.
+								{:else}
+									Please commit your resolved conflicts to continue.
+								{/if}
+							</div>
+						{/if}
 						<BranchFiles
-							{branch}
+							branchId={branch.id}
+							files={branch.files}
 							{isUnapplied}
 							{selectedOwnership}
 							{selectedFiles}
 							showCheckboxes={$commitBoxOpen}
+							allowMultiple={true}
+							readonly={false}
 						/>
 						{#if branch.active}
 							<CommitDialog
diff --git a/gitbutler-ui/src/lib/components/BranchFiles.svelte b/gitbutler-ui/src/lib/components/BranchFiles.svelte
index 6df562528..a7e9986bf 100644
--- a/gitbutler-ui/src/lib/components/BranchFiles.svelte
+++ b/gitbutler-ui/src/lib/components/BranchFiles.svelte
@@ -4,45 +4,34 @@
 	import FileTree from './FileTree.svelte';
 	import { filesToFileTree } from '$lib/vbranches/filetree';
 	import type { Ownership } from '$lib/vbranches/ownership';
-	import type { Branch, LocalFile } from '$lib/vbranches/types';
+	import type { LocalFile, RemoteFile } from '$lib/vbranches/types';
 	import type { Writable } from 'svelte/store';
 
-	export let branch: Branch;
+	export let branchId: string;
+	export let files: LocalFile[] | RemoteFile[];
 	export let isUnapplied: boolean;
 	export let selectedOwnership: Writable<Ownership>;
-	export let selectedFiles: Writable<LocalFile[]>;
+	export let selectedFiles: Writable<(LocalFile | RemoteFile)[]>;
 	export let showCheckboxes = false;
 
+	export let allowMultiple: boolean;
+	export let readonly: boolean;
+
 	let selectedListMode: string;
 </script>
 
-{#if branch.active && branch.conflicted}
-	<div class="mb-2 bg-red-500 p-2 font-bold text-white">
-		{#if branch.files.some((f) => f.conflicted)}
-			This virtual branch conflicts with upstream changes. Please resolve all conflicts and commit
-			before you can continue.
-		{:else}
-			Please commit your resolved conflicts to continue.
-		{/if}
-	</div>
-{/if}
-
 <div class="branch-files" class:isUnapplied>
 	<div class="branch-files__header">
-		<BranchFilesHeader
-			files={branch.files}
-			{selectedOwnership}
-			{showCheckboxes}
-			bind:selectedListMode
-		/>
+		<BranchFilesHeader {files} {selectedOwnership} {showCheckboxes} bind:selectedListMode />
 	</div>
-	{#if branch.files.length > 0}
+	{#if files.length > 0}
 		<div class="files-padding">
 			{#if selectedListMode == 'list'}
 				<BranchFilesList
-					allowMultiple
-					branchId={branch.id}
-					files={branch.files}
+					{allowMultiple}
+					{readonly}
+					{branchId}
+					{files}
 					{selectedOwnership}
 					{selectedFiles}
 					{showCheckboxes}
@@ -50,10 +39,11 @@
 				/>
 			{:else}
 				<FileTree
-					allowMultiple
-					node={filesToFileTree(branch.files)}
+					{allowMultiple}
+					{readonly}
+					node={filesToFileTree(files)}
 					{showCheckboxes}
-					branchId={branch.id}
+					{branchId}
 					isRoot={true}
 					{selectedOwnership}
 					{selectedFiles}
diff --git a/gitbutler-ui/src/lib/components/CommitCard.svelte b/gitbutler-ui/src/lib/components/CommitCard.svelte
index 87f45550b..45d65da53 100644
--- a/gitbutler-ui/src/lib/components/CommitCard.svelte
+++ b/gitbutler-ui/src/lib/components/CommitCard.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-	import BranchFilesHeader from './BranchFilesHeader.svelte';
-	import BranchFilesList from './BranchFilesList.svelte';
-	import FileTree from './FileTree.svelte';
+	import BranchFiles from './BranchFiles.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import Tag from '$lib/components/Tag.svelte';
 	import TimeAgo from '$lib/components/TimeAgo.svelte';
 	import { draggable } from '$lib/dragging/draggable';
 	import { draggableCommit, nonDraggable } from '$lib/dragging/draggables';
 	import { openExternalUrl } from '$lib/utils/url';
-	import { filesToFileTree } from '$lib/vbranches/filetree';
 	import { Ownership } from '$lib/vbranches/ownership';
 	import { listRemoteCommitFiles } from '$lib/vbranches/remoteCommits';
 	import { LocalFile, RemoteCommit, Commit, RemoteFile } from '$lib/vbranches/types';
@@ -26,7 +23,6 @@
 	const selectedOwnership = writable(Ownership.default());
 
 	let showFiles = false;
-	let selectedListMode: string;
 
 	let files: RemoteFile[] = [];
 
@@ -86,35 +82,16 @@
 
 	{#if showFiles}
 		<div class="files-container" transition:slide={{ duration: 100 }}>
-			<div class="files__header">
-				<BranchFilesHeader
-					{files}
-					{selectedOwnership}
-					showCheckboxes={false}
-					bind:selectedListMode
-				/>
-			</div>
-			<div class="files">
-				{#if selectedListMode == 'list'}
-					<BranchFilesList
-						branchId="blah"
-						{files}
-						{selectedOwnership}
-						{selectedFiles}
-						{isUnapplied}
-						readonly={true}
-					/>
-				{:else}
-					<FileTree
-						node={filesToFileTree(files)}
-						branchId="blah"
-						isRoot={true}
-						{selectedOwnership}
-						{selectedFiles}
-						{isUnapplied}
-					/>
-				{/if}
-			</div>
+			<BranchFiles
+				branchId="blah"
+				{files}
+				{isUnapplied}
+				{selectedOwnership}
+				{selectedFiles}
+				allowMultiple={true}
+				readonly={true}
+			/>
+
 			{#if !commit.isLocal && commitUrl}
 				<div class="files__footer">
 					<Button
@@ -225,21 +202,6 @@
 		background-color: var(--clr-theme-container-light);
 	}
 
-	.files {
-		padding-top: 0;
-		padding-left: var(--space-12);
-		padding-right: var(--space-12);
-		padding-bottom: var(--space-12);
-	}
-
-	.files__header {
-		border-top: 1px solid var(--clr-theme-container-outline-light);
-		padding-top: var(--space-12);
-		padding-bottom: var(--space-12);
-		padding-left: var(--space-20);
-		padding-right: var(--space-12);
-	}
-
 	.files__footer {
 		text-align: right;
 		padding: var(--space-12);
diff --git a/gitbutler-ui/src/lib/components/FileTree.svelte b/gitbutler-ui/src/lib/components/FileTree.svelte
index da5f64a1f..e08764948 100644
--- a/gitbutler-ui/src/lib/components/FileTree.svelte
+++ b/gitbutler-ui/src/lib/components/FileTree.svelte
@@ -19,6 +19,7 @@
 	export let branchId: string;
 	export let isUnapplied: boolean;
 	export let allowMultiple = false;
+	export let readonly = false;
 
 	function isNodeChecked(selectedOwnership: Ownership, node: TreeNode): boolean {
 		if (node.file) {
@@ -74,6 +75,7 @@
 					{selectedFiles}
 					{branchId}
 					{isUnapplied}
+					{readonly}
 					on:checked
 					on:unchecked
 				/>
@@ -90,6 +92,7 @@
 		selected={$selectedFiles.includes(file)}
 		{selectedOwnership}
 		{selectedFiles}
+		{readonly}
 		showCheckbox={showCheckboxes}
 		on:click={(e) => {
 			e.stopPropagation();
@@ -133,6 +136,7 @@
 						{selectedFiles}
 						{branchId}
 						{isUnapplied}
+						{readonly}
 						on:checked
 						on:unchecked
 					/>
diff --git a/gitbutler-ui/src/lib/components/TreeListFile.svelte b/gitbutler-ui/src/lib/components/TreeListFile.svelte
index ae5caab29..080114935 100644
--- a/gitbutler-ui/src/lib/components/TreeListFile.svelte
+++ b/gitbutler-ui/src/lib/components/TreeListFile.svelte
@@ -15,6 +15,7 @@
 	export let showCheckbox: boolean = false;
 	export let selectedOwnership: Writable<Ownership>;
 	export let selectedFiles: Writable<AnyFile[]>;
+	export let readonly = false;
 
 	let checked = false;
 	let indeterminate = false;
@@ -41,7 +42,7 @@
 	}}
 	use:draggable={{
 		...draggableFile(branchId, file, selectedFiles),
-		disabled: isUnapplied,
+		disabled: readonly || isUnapplied,
 		selector: '.selected'
 	}}
 	on:click