some-ui-improvements (#11413)

* refactor(ui): remove unused yOffsetPx prop

* feat(ui): change dropzone copy and add inline create-branch button

* fix(drawers): bottom border conditions

* feat(ui): prevent drawers from shrinking to keep full header visible

Author: PavelLaptev

apps/desktop/src/components/BranchView.svelte

@@ -98,7 +98,6 @@
 			{grow}
 			{onclose}
 			{ontoggle}
-			bottomBorder
 			noshrink
 		>
 			{#snippet header()}

apps/desktop/src/components/ChangedFiles.svelte

@@ -24,7 +24,6 @@
 		draggableFiles?: boolean;
 		grow?: boolean;
 		noshrink?: boolean;
-		bottomBorder?: boolean;
 		resizer?: Partial<ComponentProps<typeof Resizer>>;
 		autoselect?: boolean;
 		ancestorMostConflictedCommitId?: string;
@@ -44,7 +43,6 @@
 		draggableFiles,
 		grow,
 		noshrink,
-		bottomBorder,
 		resizer,
 		autoselect,
 		ancestorMostConflictedCommitId,
@@ -75,7 +73,6 @@
 	{ontoggle}
 	{resizer}
 	{noshrink}
-	bottomBorder={changes.length > 0}
 	persistId={`changed-files-drawer-${projectId}-${stackId || 'default'}`}
 	childrenWrapHeight={changes.length > 0 ? 'auto' : '100%'}
 	childrenWrapDisplay={changes.length > 0 ? 'block' : 'flex'}
@@ -93,7 +90,7 @@
 		<FileListMode bind:mode={listMode} persistId={`changed-files-${persistId}`} />
 	{/snippet}
 
-	<div class="filelist-wrapper" class:bottom-border={bottomBorder}>
+	<div class="filelist-wrapper">
 		{#if changes.length > 0 || Object.entries(conflictEntries?.entries ?? {}).length > 0}
 			<FileList
 				{selectionId}
@@ -129,9 +126,5 @@
 		height: 100%;
 		margin-bottom: 16px;
 		background-color: var(--clr-bg-1);
-
-		&.bottom-border {
-			border-bottom: 1px solid var(--clr-border-2);
-		}
 	}
 </style>

apps/desktop/src/components/CommitLineOverlay.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
 	import { portal } from '@gitbutler/ui/utils/portal';
-	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 
 	interface Props {
 		hovered: boolean;
 		activated: boolean;
 		advertize?: boolean;
-		yOffsetPx?: number;
 	}
 
-	const { hovered, activated, advertize, yOffsetPx = 0 }: Props = $props();
+	const { hovered, activated, advertize }: Props = $props();
 
 	let containerElement = $state<HTMLDivElement>();
 	let indicatorElement = $state<HTMLDivElement>();
@@ -50,7 +48,6 @@
 	class:activated
 	class:advertize
 	class:hovered
-	style:--y-offset="{pxToRem(yOffsetPx)}rem"
 >
 	<div bind:this={indicatorElement} class="indicator-placeholder"></div>
 </div>

apps/desktop/src/components/CommitView.svelte

@@ -159,7 +159,6 @@
 				cancelEdit();
 				onclose?.();
 			}}
-			bottomBorder
 			noshrink
 		>
 			{#snippet header()}

apps/desktop/src/components/Drawer.svelte

@@ -36,7 +36,7 @@
 		children,
 		testId,
 		persistId,
-		bottomBorder,
+		bottomBorder = true,
 		grow,
 		noshrink,
 		resizer,
@@ -68,7 +68,7 @@
 	bind:this={containerDiv}
 	bind:clientHeight
 	class:collapsed={$collapsed}
-	class:bottom-border={bottomBorder && !resizer}
+	class:bottom-border={bottomBorder && !$collapsed}
 	class:grow
 	class:noshrink
 >
@@ -126,7 +126,6 @@
 			passive={resizer.passive}
 			disabled={$collapsed}
 			direction="down"
-			showBorder
 			{...resizer}
 			{maxHeight}
 		/>
@@ -154,7 +153,6 @@
 		}
 		&.collapsed {
 			max-height: none;
-			margin-bottom: -1px;
 		}
 	}
 

apps/desktop/src/components/MultiStackView.svelte

@@ -275,9 +275,14 @@
 						onclick={() => createBranchModal?.show()}>create a new branch</button
 					> +
 				{:else}
-					Drag changes here to
+					Drop files to start a branch,
 					<br />
-					branch off your changes
+					or
+					<button
+						type="button"
+						class="underline-dotted pointer-events clr-text-2 link-hover-2"
+						onclick={() => createBranchModal?.show()}>create a new branch</button
+					> +
 				{/if}
 			{/snippet}
 		</MultiStackOfflaneDropzone>

apps/desktop/src/components/PRBranchView.svelte

@@ -21,11 +21,7 @@
 
 <ReduxResult result={prQuery?.result} {projectId} {onerror}>
 	{#snippet children(pr)}
-		<Drawer
-			testId={TestId.PRBranchDrawer}
-			persistId="pr-branch-drawer-{projectId}-{pr.number}"
-			bottomBorder
-		>
+		<Drawer testId={TestId.PRBranchDrawer} persistId="pr-branch-drawer-{projectId}-{pr.number}">
 			{#snippet header()}
 				<h3 class="text-14 text-semibold truncate">
 					<span class="clr-text-2">PR {unitSymbol}{pr.number}:</span>

apps/desktop/src/components/StackView.svelte

@@ -717,7 +717,10 @@
 													{@render assignedChangePreview(assignedStackId)}
 												</ConfigurableScrollableContainer>
 											{:else if selectedFile}
-												<Drawer persistId="file-preview-drawer-{stableStackId}">
+												<Drawer
+													persistId="file-preview-drawer-{stableStackId}"
+													bottomBorder={false}
+												>
 													{#snippet header()}
 														<FileViewHeader
 															noPaddings

apps/desktop/src/components/UnappliedBranchView.svelte

@@ -47,7 +47,7 @@
 			testId={TestId.UnappliedBranchDrawer}
 			persistId="unapplied-branch-drawer-{projectId}-{branch.name}"
 			{onclose}
-			bottomBorder
+			noshrink
 		>
 			{#snippet header()}
 				<div class="branch__header">

apps/desktop/src/components/UnappliedCommitView.svelte

@@ -24,7 +24,12 @@
 
 <ReduxResult {projectId} result={commitQuery.result}>
 	{#snippet children(commit)}
-		<Drawer {onclose} bottomBorder persistId="unapplied-commit-drawer-{projectId}-{commitId}">
+		<Drawer
+			{onclose}
+			bottomBorder
+			noshrink
+			persistId="unapplied-commit-drawer-{projectId}-{commitId}"
+		>
 			{#snippet header()}
 				<CommitTitle
 					truncate