Runs page hide right panel (#6949)

* Hide right runs panel when not selected

* AnimatedPane

* nits

frontend/src/lib/components/splitPanes/AnimatedPane.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { type ComponentProps } from 'svelte'
+	import { Pane } from 'svelte-splitpanes'
+	import { cubicOut } from 'svelte/easing'
+
+	let {
+		duration = 300,
+		easing = cubicOut,
+		size,
+		opened,
+		children,
+		...props
+	}: ComponentProps<typeof Pane> & {
+		duration?: number
+		easing?: (t: number) => number
+		opened: boolean
+		children?: import('svelte').Snippet
+		size: number
+	} = $props()
+
+	let userChangedSize: number | undefined = $state(undefined)
+
+	let t = $state(opened ? 1 : 0)
+	let computedSize = $derived((opened ? easing(t) : 1 - easing(1 - t)) * (userChangedSize ?? size))
+
+	let lastTValue = 0
+	let loopIsRunning = false
+
+	function animationCallback(tValue: number) {
+		let delta = tValue - lastTValue
+		if (opened) t = Math.min(1, t + delta / duration)
+		else t = Math.max(0, t - delta / duration)
+
+		if ((t === 0 && !opened) || (t === 1 && opened)) {
+			loopIsRunning = false
+			return
+		}
+
+		lastTValue = tValue
+		requestAnimationFrame(animationCallback)
+	}
+
+	$effect(() => {
+		opened
+		if (!loopIsRunning) {
+			loopIsRunning = true
+			requestAnimationFrame((tValue) => {
+				lastTValue = tValue
+				requestAnimationFrame(animationCallback)
+			})
+		}
+	})
+</script>
+
+<Pane {...props} bind:size={() => computedSize, (v) => (userChangedSize = v)}>
+	{@render children()}
+</Pane>

frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte

@@ -48,6 +48,7 @@
 	import { createBubbler } from 'svelte/legacy'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import AnimatedPane from '$lib/components/splitPanes/AnimatedPane.svelte'
 
 	let jobs: Job[] | undefined = $state()
 	let selectedIds: string[] = $state([])
@@ -1157,7 +1158,7 @@
 
 		<div class="grow min-h-0">
 			<Splitpanes>
-				<Pane size={60} minSize={40}>
+				<Pane minSize={40}>
 					<div class="flex flex-col h-full">
 						<!-- Runs table top bar -->
 						<div
@@ -1296,7 +1297,7 @@
 						</div>
 					</div>
 				</Pane>
-				<Pane size={40} minSize={15} class="flex flex-col">
+				<AnimatedPane size={40} minSize={15} class="flex flex-col" opened={selectedIds.length > 0}>
 					{#if selectionMode === 're-run'}
 						<BatchReRunOptionsPane {selectedIds} bind:options={batchReRunOptions} />
 					{:else if selectedIds.length === 1}
@@ -1314,10 +1315,8 @@
 						<div class="text-xs m-4"
 							>There are {selectedIds.length} jobs selected. Choose 1 to see detailed information</div
 						>
-					{:else}
-						<div class="text-xs m-4">No job selected</div>
 					{/if}
-				</Pane>
+				</AnimatedPane>
 			</Splitpanes>
 		</div>
 	</div>