feat: remove resizer border imitation and drop resizer highlight (#9806)

* Made details view pop

Rearrange div structure to achieve an unfolded lane layout. 
The idea is to adjust the right margin and render the details 
view as an absolutely positioned element, allowing the 
scrollbar to be on the right side of the whole lane.

Otherwise, the scrollbar would appear in the middle between 
sections, which doesn’t fit the layout.

* Details view resizer refactoring

Because we decided not to resize the commit/branch details 
section, and the changes preview section now takes only the 
maximum height of the remaining space or fits the content, 
basically only one section is resizable — the changes list. 
That’s why we don’t need complex calculations here.

* feat: remove resizer border imitation and drop resizer highlight

Author: PavelLaptev

apps/desktop/src/components/BranchesView.svelte

@@ -267,7 +267,6 @@
 					viewport={branchViewLeftEl}
 					direction="right"
 					minWidth={14}
-					borderRadius="ml"
 					persistId="resizer-branchesWidth"
 					defaultValue={24}
 				/>

apps/desktop/src/components/ChangedFiles.svelte

@@ -73,7 +73,7 @@
 	});
 </script>
 
-<Drawer {grow} {ontoggle} {resizer} {noshrink}>
+<Drawer {grow} {ontoggle} {resizer} {noshrink} bottomBorder>
 	{#snippet header()}
 		<h4 class="text-14 text-semibold truncate">{title}</h4>
 		<div class="text-11 header-stats">
@@ -99,6 +99,7 @@
 				{conflictEntries}
 				{draggableFiles}
 				{ancestorMostConflictedCommitId}
+				hideLastFileBorder={false}
 				onselect={() => {
 					if (stackId) {
 						intelligentScrollingService.show(projectId, stackId, 'diff');
@@ -125,6 +126,7 @@
 	.filelist-wrapper {
 		display: flex;
 		flex-direction: column;
+		margin-bottom: 16px;
 		background-color: var(--clr-bg-1);
 
 		&.bottom-border {

apps/desktop/src/components/Drawer.svelte

@@ -161,7 +161,6 @@
 			passive={resizer.passive}
 			hidden={$collapsed}
 			direction="down"
-			imitateBorder
 			{...resizer}
 			{maxHeight}
 		/>

apps/desktop/src/components/MainViewport.svelte

@@ -154,8 +154,6 @@ the window, then enlarge it and retain the original widths of the layout.
 				minWidth={leftMinWidth}
 				defaultValue={leftDefaultWidth}
 				maxWidth={leftMaxWidth}
-				imitateBorder
-				borderRadius={!preview ? 'ml' : 'none'}
 				persistId="viewport-${name}-left-section"
 				onWidth={(width) => {
 					leftPreferredWidth = width;
@@ -182,7 +180,6 @@ the window, then enlarge it and retain the original widths of the layout.
 					direction="right"
 					minWidth={previewMinWidth}
 					maxWidth={previewMaxWidth}
-					borderRadius="ml"
 					persistId="viewport-${name}-left-sideview"
 					defaultValue={pxToRem(previewWidth?.default, zoom)}
 					onWidth={(width) => {
@@ -225,7 +222,6 @@ the window, then enlarge it and retain the original widths of the layout.
 				minWidth={rightMinWidth}
 				defaultValue={pxToRem(rightWidth.default, zoom)}
 				maxWidth={rightMaxWidth}
-				borderRadius="ml"
 				persistId="viewport-${name}-right-sideview"
 				onWidth={(width) => {
 					rightPreferredWidth = width;
@@ -307,7 +303,6 @@ the window, then enlarge it and retain the original widths of the layout.
 
 	.left-sideview-open .left-section__content {
 		border-radius: var(--radius-ml) 0 0 var(--radius-ml);
-		border-right-color: transparent;
 	}
 
 	.main-section {

apps/desktop/src/components/Resizer.svelte

@@ -15,13 +15,8 @@
 		viewport: HTMLElement;
 		/** Sets direction of resizing for viewport */
 		direction: 'left' | 'right' | 'up' | 'down';
-		/** Border radius for cases when the resizable element has rounded corners */
-		borderRadius?: 's' | 'm' | 'ml' | 'l' | 'none';
 		/** Custom z-index in case of overlapping with other elements */
 		zIndex?: string;
-		/** imitate border */
-		imitateBorder?: boolean;
-		borderColor?: string;
 		/** Other resizers with the same name will receive same updates. */
 		syncName?: string;
 		/** Name under which the latest width is stored. */
@@ -47,7 +42,6 @@
 		onWidth?: (width: number) => void;
 		onResizing?: (isResizing: boolean) => void;
 		onOverflow?: (value: number) => void;
-		onHover?: (isHovering: boolean) => void;
 		onDblClick?: () => void;
 	}
 
@@ -60,9 +54,6 @@
 		maxWidth = 120,
 		minHeight = 0,
 		maxHeight = 120,
-		borderRadius = 'none',
-		imitateBorder,
-		borderColor = 'var(--clr-border-2)',
 		syncName,
 		persistId,
 		passive,
@@ -72,7 +63,6 @@
 		unsetMaxHeight,
 		onResizing,
 		onOverflow,
-		onHover,
 		onDblClick,
 		onWidth
 	}: Props = $props();
@@ -227,10 +217,6 @@
 		}
 	}
 
-	function isHovered(isHovered: boolean) {
-		onHover?.(isHovered);
-	}
-
 	function getValue() {
 		if ($value !== undefined) {
 			return $value;
@@ -292,21 +278,16 @@
 	});
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
+	role="presentation"
 	bind:this={resizerDiv}
 	data-remove-from-draggable
 	onmousedown={onMouseDown}
 	ondblclick={() => {
 		onDblClick?.();
 		setValue(defaultValue);
 	}}
-	onmouseenter={() => isHovered(true)}
-	onmouseleave={() => isHovered(false)}
-	tabindex="0"
 	class:hidden
-	class:imitate-border={imitateBorder}
 	class="resizer"
 	class:dragging
 	class:vertical={orientation === 'vertical'}
@@ -316,117 +297,46 @@
 	class:left={direction === 'left'}
 	class:right={direction === 'right'}
 	style:z-index={zIndex}
-	style:--resizer-border-radius="var(--radius-{borderRadius})"
-	style:--border-imitation-color={borderColor}
->
-	<div class="resizer-line"></div>
-</div>
+></div>
 
 <style lang="postcss">
 	.resizer {
-		--resizer-line-thickness: 0;
-		--resizer-line-color: transparent;
-		/* resizer-line-frame should be the same as border-radius */
-		--resizer-line-frame: var(--resizer-border-radius, 1px);
+		--resizer-thickness: 4px;
 		--resizer-cursor: default;
 		position: absolute;
 		outline: none;
 		cursor: var(--resizer-cursor);
 
-		&.imitate-border {
-			--resizer-line-color: var(--border-imitation-color);
-			--resizer-line-thickness: 1px;
-		}
-
-		&:not(.hidden) {
-			&:hover,
-			&:focus,
-			&.dragging {
-				--resizer-line-color: var(--resizer-color);
-				--resizer-line-thickness: 0.14rem;
-
-				& .resizer-line {
-					transition-delay: 0.1s;
-				}
-			}
-		}
-
 		&.horizontal {
 			--resizer-cursor: col-resize;
 			top: 0;
-			width: 4px;
+			width: var(--resizer-thickness);
 			height: 100%;
-
-			& .resizer-line {
-				width: var(--resizer-line-frame);
-			}
 		}
 
 		&.vertical {
 			--resizer-cursor: row-resize;
 			left: 0;
 			width: 100%;
-			height: 4px;
-
-			& .resizer-line {
-				height: var(--resizer-line-frame);
-			}
+			height: var(--resizer-thickness);
 		}
 
 		&.right {
 			right: 0;
-
-			& .resizer-line {
-				left: auto;
-				border-right: var(--resizer-line-thickness) solid var(--resizer-line-color);
-				border-top-right-radius: var(--resizer-border-radius);
-				border-bottom-right-radius: var(--resizer-border-radius);
-			}
 		}
 		&.left {
 			left: 0;
-
-			& .resizer-line {
-				right: auto;
-				border-left: var(--resizer-line-thickness) solid var(--resizer-line-color);
-				border-top-left-radius: var(--resizer-border-radius);
-				border-bottom-left-radius: var(--resizer-border-radius);
-			}
 		}
 		&.up {
 			top: 0;
-
-			& .resizer-line {
-				bottom: auto;
-				border-top: var(--resizer-line-thickness) solid var(--resizer-line-color);
-				border-top-right-radius: var(--resizer-border-radius);
-				border-top-left-radius: var(--resizer-border-radius);
-			}
 		}
 		&.down {
 			bottom: 0;
-
-			& .resizer-line {
-				top: auto;
-				border-bottom: var(--resizer-line-thickness) solid var(--resizer-line-color);
-				border-bottom-right-radius: var(--resizer-border-radius);
-				border-bottom-left-radius: var(--resizer-border-radius);
-			}
 		}
 
 		&.hidden {
 			pointer-events: none;
 			--resizer-cursor: default;
 		}
 	}
-
-	.resizer-line {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		pointer-events: none;
-		transition: border 0.1s ease;
-	}
 </style>

apps/desktop/src/routes/[projectId]/history/+page.svelte

@@ -194,7 +194,6 @@
 			viewport={sidebarEl}
 			direction="right"
 			minWidth={14}
-			borderRadius="ml"
 			persistId="resizer-historyWidth"
 			defaultValue={30}
 		/>