Tree view design update

apps/desktop/src/components/v3/BranchHeader.svelte

@@ -114,7 +114,7 @@
 					<span class="text-12 text-body branch-header__empty-state">
 						This is an empty branch. Click to see details.
 						<br />
-						Create or drag & drop commits here
+						Create or drag & drop commits here.
 					</span>
 				{:else}
 					{@render details?.()}
@@ -177,6 +177,7 @@
 
 		&.new-branch {
 			border-bottom: none;
+			border-radius: var(--radius-ml);
 		}
 	}
 

apps/desktop/src/components/v3/ChangedFiles.svelte

@@ -45,9 +45,9 @@
 	<div class="changed-files">
 		<ReduxResult result={changesResult.current}>
 			{#snippet children(changes)}
-				<div class="header text-13 text-bold">
+				<div class="header">
 					<div class="header-left">
-						<span>{headerTitle}</span>
+						<h4 class="text-14 text-semibold">{headerTitle}</h4>
 						<Badge>{changes.length}</Badge>
 					</div>
 					<FileListMode bind:mode={listMode} persist="committed" />
@@ -75,7 +75,7 @@
 	}
 
 	.header {
-		padding: 14px 14px 16px 14px;
+		padding: 10px 10px 10px 14px;
 		display: flex;
 		align-items: center;
 		gap: 4px;

apps/desktop/src/components/v3/FileList.svelte

@@ -1,9 +1,8 @@
 <!-- This is a V3 replacement for `BranchFileList.svelte` -->
 <script lang="ts">
-	import ScrollableContainer from '$components/ConfigurableScrollableContainer.svelte';
 	import LazyloadContainer from '$components/LazyloadContainer.svelte';
 	import FileListItemWrapper from '$components/v3/FileListItemWrapper.svelte';
-	import FileTree from '$components/v3/FileTree.svelte';
+	import FileTreeNode from '$components/v3/FileTreeNode.svelte';
 	import { abbreviateFolders, changesToFileTree } from '$lib/files/filetreeV3';
 	import { IdSelection } from '$lib/selection/idSelection.svelte';
 	import { selectFilesInList, updateSelection } from '$lib/selection/idSelectionUtils';
@@ -80,13 +79,15 @@
 	);
 </script>
 
-{#snippet fileWrapper(change: TreeChange, idx: number)}
+{#snippet fileWrapper(change: TreeChange, idx: number, depth: number = 0)}
 	<FileListItemWrapper
 		selectedFile={selectionId}
 		{change}
 		{projectId}
 		{listActive}
 		{listMode}
+		{depth}
+		isLast={idx === visibleFiles.length - 1}
 		selected={idSelection.has(change.path, selectionId)}
 		onclick={(e) => {
 			stackState?.activeSelectionId.set(selectionId);
@@ -96,34 +97,31 @@
 {/snippet}
 
 {#if visibleFiles.length > 0}
-	<div class="file-list hide-native-scrollbar">
-		<ScrollableContainer wide>
-			<!-- Maximum amount for initial render is 100 files
-	`minTriggerCount` set to 80 in order to start the loading a bit earlier. -->
-			<LazyloadContainer
-				minTriggerCount={80}
-				ontrigger={() => {
-					loadMore();
+	<LazyloadContainer
+		minTriggerCount={80}
+		ontrigger={() => {
+			loadMore();
+		}}
+		role="listbox"
+		onkeydown={handleKeyDown}
+	>
+		{#if listMode === 'tree'}
+			{@const node = abbreviateFolders(changesToFileTree(changes))}
+			<FileTreeNode
+				isRoot
+				{stackId}
+				{node}
+				{showCheckboxes}
+				{changes}
+				{fileWrapper}
+				onFolderClick={() => {
+					console.warn('implement folder click to select all children');
 				}}
-				role="listbox"
-				onkeydown={handleKeyDown}
-			>
-				{#if listMode === 'tree'}
-					{@const node = abbreviateFolders(changesToFileTree(changes))}
-					<FileTree {stackId} {changes} {node} expanded {showCheckboxes} {fileWrapper} />
-				{:else}
-					{#each visibleFiles as change, idx (change.path)}
-						{@render fileWrapper(change, idx)}
-					{/each}
-				{/if}
-			</LazyloadContainer>
-		</ScrollableContainer>
-	</div>
+			/>
+		{:else}
+			{#each visibleFiles as change, idx (change.path)}
+				{@render fileWrapper(change, idx)}
+			{/each}
+		{/if}
+	</LazyloadContainer>
 {/if}
-
-<style lang="postcss">
-	.file-list {
-		flex-grow: 1;
-		overflow: hidden;
-	}
-</style>

apps/desktop/src/components/v3/FileListItemWrapper.svelte

@@ -22,9 +22,11 @@
 		selected?: boolean;
 		isHeader?: boolean;
 		listActive?: boolean;
+		isLast?: boolean;
 		listMode: 'list' | 'tree';
 		linesAdded?: number;
 		linesRemoved?: number;
+		depth?: number;
 		onclick?: (e: MouseEvent) => void;
 		onkeydown?: (e: KeyboardEvent) => void;
 	}
@@ -36,9 +38,11 @@
 		selected,
 		isHeader,
 		listActive,
+		isLast,
 		listMode,
 		linesAdded,
 		linesRemoved,
+		depth,
 		onclick,
 		onkeydown
 	}: Props = $props();
@@ -137,6 +141,8 @@
 			checked={!!selection.current}
 			{listActive}
 			{indeterminate}
+			{isLast}
+			{depth}
 			draggable={!isCommitting}
 			{onkeydown}
 			locked={false}
@@ -153,11 +159,5 @@
 <style lang="postcss">
 	.filelistitem-wrapper {
 		display: block;
-
-		&.sticky {
-			position: sticky;
-			top: -1px;
-			z-index: 1;
-		}
 	}
 </style>

apps/desktop/src/components/v3/FileListMode.svelte

@@ -24,12 +24,10 @@
 	defaultIndex={$saved === 'list' ? 0 : 1}
 	onselect={(id) => {
 		// TODO: Refactor SegmentControl.
-		$saved = id as any;
+		$saved = id as Mode;
 	}}
+	size="small"
 >
-	<Segment id="list">List</Segment>
-	<Segment id="tree">Tree</Segment>
+	<Segment id="list" icon="list-view" />
+	<Segment id="tree" icon="tree-view" />
 </SegmentControl>
-
-<style lang="postcss">
-</style>

apps/desktop/src/components/v3/FileTreeIndent.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	interface Props {
+		indentLevel: number;
+	}
+
+	const { indentLevel }: Props = $props();
+</script>
+
+<div class="filetree-indent">
+	<span>
+		{indentLevel}
+	</span>
+</div>

apps/desktop/src/components/v3/FileTreeNode.svelte

@@ -11,59 +11,67 @@
 		isRoot?: boolean;
 		showCheckboxes: boolean;
 		changes: TreeChange[];
-		fileWrapper: Snippet<[TreeChange, number]>;
+		depth?: number;
+		fileWrapper: Snippet<[TreeChange, number, number]>;
+		onFolderClick: (e: MouseEvent) => void;
 	};
 
-	let { stackId, node, isRoot = false, showCheckboxes, changes, fileWrapper }: Props = $props();
+	let {
+		stackId,
+		node,
+		isRoot = false,
+		showCheckboxes,
+		changes,
+		depth = 0,
+		fileWrapper,
+		onFolderClick
+	}: Props = $props();
+
+	// Local state to track whether the folder is expanded
+	let isExpanded = $state(true);
+
+	// Handler for toggling the folder
+	function handleToggle() {
+		isExpanded = !isExpanded;
+	}
 </script>
 
 {#if isRoot}
 	<!-- Node is a root and should only render children! -->
-	<div class="text-13">
-		{#each node.children as childNode}
-			<Self {stackId} node={childNode} {showCheckboxes} {changes} {fileWrapper} />
-		{/each}
-	</div>
+	{#each node.children as childNode}
+		<Self
+			{depth}
+			{stackId}
+			node={childNode}
+			{showCheckboxes}
+			{changes}
+			{fileWrapper}
+			{onFolderClick}
+		/>
+	{/each}
 {:else if node.kind === 'file'}
-	{@render fileWrapper(node.change, node.index)}
+	{@render fileWrapper(node.change, node.index, depth)}
 {:else}
-	<TreeListFolder showCheckbox={showCheckboxes} {node} />
+	<TreeListFolder
+		{depth}
+		{isExpanded}
+		showCheckbox={showCheckboxes}
+		{node}
+		onclick={onFolderClick}
+		ontoggle={handleToggle}
+	/>
 
-	<div class="nested">
-		<div class="line-wrapper">
-			<div class="line"></div>
-		</div>
-		<div class="files-list">
-			{#each node.children as childNode}
-				<Self {stackId} node={childNode} {showCheckboxes} {changes} {fileWrapper} />
-			{/each}
-		</div>
-	</div>
+	{#if isExpanded}
+		{#each node.children as childNode}
+			<Self
+				depth={depth + 1}
+				{stackId}
+				node={childNode}
+				{showCheckboxes}
+				{changes}
+				{fileWrapper}
+				{onFolderClick}
+			/>
+		{/each}
+	{/if}
 {/if}
-
-<style lang="postcss">
-	.nested {
-		display: flex;
-		width: 100%;
-		overflow: hidden;
-	}
-	.line-wrapper {
-		position: relative;
-		padding-left: 7px;
-		padding-right: 7px;
-		&:hover .line {
-			background-color: var(--clr-scale-ntrl-60);
-		}
-	}
-	.line {
-		width: 1px;
-		height: 100%;
-		background-color: var(--clr-scale-ntrl-80);
-	}
-	.files-list {
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-		width: 100%;
-	}
-</style>