feat (branches): center SelectionView and add notClosable prop to disable close button (#9428)

Author: PavelLaptev

apps/desktop/src/components/BranchesView.svelte

@@ -5,6 +5,7 @@
 	import BranchesViewBranch from '$components/BranchesViewBranch.svelte';
 	import BranchesViewPr from '$components/BranchesViewPR.svelte';
 	import BranchesViewStack from '$components/BranchesViewStack.svelte';
+	import ConfigurableScrollableContainer from '$components/ConfigurableScrollableContainer.svelte';
 	import PrBranchView from '$components/PRBranchView.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import Resizer from '$components/Resizer.svelte';
@@ -400,9 +401,19 @@
 					{/if}
 
 					{#if !isNonLocalPr}
-						<SelectionView testId={TestId.BranchesSelectionView} {projectId} {selectionId} />
+						<div class="preview-selection">
+							<ConfigurableScrollableContainer zIndex="var(--z-lifted)">
+								<SelectionView
+									testId={TestId.BranchesSelectionView}
+									{projectId}
+									{selectionId}
+									notClosable
+								/>
+							</ConfigurableScrollableContainer>
+						</div>
 					{/if}
 				</div>
+
 				<Scrollbar viewport={rightWrapper} horz />
 			</div>
 		</div>
@@ -484,4 +495,13 @@
 		border-bottom: 1px solid var(--clr-border-2);
 		background-color: var(--clr-bg-1);
 	}
+
+	.preview-selection {
+		display: flex;
+		position: relative;
+		flex: 1;
+		flex-direction: column;
+		min-height: 100%;
+		overflow: hidden;
+	}
 </style>

apps/desktop/src/components/FilePreviewPlaceholder.svelte

@@ -13,14 +13,13 @@
 	.select-some {
 		display: flex;
 		z-index: 0;
-		position: relative;
+		position: absolute;
+		top: 50%;
+		left: 50%;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
-		height: 100%;
-		padding: 40px 0;
-		overflow: hidden;
+		transform: translate(-50%, -50%);
 
 		&:after {
 			z-index: -1;
@@ -33,7 +32,6 @@
 			border-radius: 100%;
 			background-color: red;
 			background: radial-gradient(var(--clr-bg-2) 10%, oklch(from var(--clr-bg-2) l c h / 0) 50%);
-			/* background: radial-gradient(red 10%, oklch(from red l c h / 0) 50%); */
 			content: '';
 			transition: opacity 0.1s;
 		}

apps/desktop/src/components/SelectionView.svelte

@@ -18,6 +18,7 @@
 		draggableFiles?: boolean;
 		diffOnly?: boolean;
 		onclose?: () => void;
+		notClosable?: boolean;
 		testId?: string;
 		bottomBorder?: boolean;
 	};
@@ -28,6 +29,7 @@
 		draggableFiles: draggable,
 		diffOnly,
 		onclose,
+		notClosable,
 		testId,
 		bottomBorder
 	}: Props = $props();
@@ -81,12 +83,14 @@
 									isHeader
 									executable={!!isExecutable}
 									listMode="list"
-									onCloseClick={() => {
-										if (idSelection) {
-											idSelection.remove(selectedFile.path, selectedFile);
-										}
-										onclose?.();
-									}}
+									onCloseClick={notClosable
+										? undefined
+										: () => {
+												if (idSelection) {
+													idSelection.remove(selectedFile.path, selectedFile);
+												}
+												onclose?.();
+											}}
 								/>
 							{/if}
 							<UnifiedDiffView