Move VirtualList into ui package and add to storybook

Author: mtsgrd

apps/desktop/src/components/TargetCommitList.svelte

@@ -2,13 +2,14 @@
 	import BranchHeaderIcon from '$components/BranchHeaderIcon.svelte';
 	import CommitRow from '$components/CommitRow.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import VirtualList from '$components/VirtualList.svelte';
 	import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
+	import { SETTINGS } from '$lib/settings/userSettings';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { inject } from '@gitbutler/core/context';
 
 	import { TestId, TimeAgo } from '@gitbutler/ui';
+	import VirtualList from '@gitbutler/ui/components/VirtualList.svelte';
 	import { getColorFromBranchType } from '@gitbutler/ui/utils/getColorFromBranchType';
 	import { onMount } from 'svelte';
 	import type { Commit } from '$lib/branches/v3';
@@ -22,6 +23,7 @@
 	const uiState = inject(UI_STATE);
 	const baseBranchService = inject(BASE_BRANCH_SERVICE);
 	const stackService = inject(STACK_SERVICE);
+	const userSettings = inject(SETTINGS);
 
 	const projectState = $derived(uiState.project(projectId));
 	const branchesState = $derived(projectState.branchesSelection);
@@ -91,7 +93,12 @@
 				</div>
 			</div>
 		</div>
-		<VirtualList items={commits} batchSize={10} onloadmore={async () => await loadMore()}>
+		<VirtualList
+			items={commits}
+			batchSize={10}
+			visibility={$userSettings.scrollbarVisibilityState}
+			onloadmore={async () => await loadMore()}
+		>
 			{#snippet chunkTemplate(commits)}
 				{#each commits as commit}
 					{@const selected = commit.id === branchesState?.current.commitId}

apps/desktop/src/components/codegen/CodegenMessages.svelte

@@ -2,7 +2,6 @@
 	import { goto } from '$app/navigation';
 	import BranchHeaderIcon from '$components/BranchHeaderIcon.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import VirtualList from '$components/VirtualList.svelte';
 
 	import ClaudeCodeSettingsModal from '$components/codegen/ClaudeCodeSettingsModal.svelte';
 	import CodegenChatClaudeNotAvaliableBanner from '$components/codegen/CodegenChatClaudeNotAvaliableBanner.svelte';
@@ -54,6 +53,7 @@
 		Tooltip
 	} from '@gitbutler/ui';
 
+	import VirtualList from '@gitbutler/ui/components/VirtualList.svelte';
 	import { getColorFromBranchType } from '@gitbutler/ui/utils/getColorFromBranchType';
 	import type { ClaudeMessage, ThinkingLevel, ModelType, PermissionMode } from '$lib/codegen/types';
 
@@ -468,6 +468,7 @@
 						initialPosition="bottom"
 						items={formattedMessages}
 						batchSize={1}
+						visibility={$userSettings.scrollbarVisibilityState}
 						padding={{ left: 20, right: 20 }}
 					>
 						{#snippet chunkTemplate(messages)}

apps/desktop/src/components/projectSettings/AppearanceSettings.svelte

@@ -5,7 +5,7 @@
 		stagingBehaviorFeature,
 		type StagingBehavior
 	} from '$lib/config/uiFeatureFlags';
-	import { SETTINGS, type ScrollbarVisilitySettings } from '$lib/settings/userSettings';
+	import { SETTINGS } from '$lib/settings/userSettings';
 	import { inject } from '@gitbutler/core/context';
 	import {
 		HunkDiff,
@@ -16,6 +16,7 @@
 		Textbox,
 		Toggle
 	} from '@gitbutler/ui';
+	import type { ScrollbarVisilitySettings } from '@gitbutler/ui/components/scroll/Scrollbar.svelte';
 
 	const userSettings = inject(SETTINGS);
 	const diff = `@@ -56,10 +56,10 @@

apps/desktop/src/lib/settings/userSettings.ts

@@ -1,10 +1,10 @@
 import { InjectionToken } from '@gitbutler/core/context';
+import { type ScrollbarVisilitySettings } from '@gitbutler/ui';
 import { get, writable, type Writable } from 'svelte/store';
 
 const SETTINGS_KEY = 'settings-json';
 export const SETTINGS = new InjectionToken<Writable<Settings>>('Settings');
 
-export type ScrollbarVisilitySettings = 'scroll' | 'hover' | 'always';
 export type CodeEditorSettings = {
 	schemeIdentifer: string;
 	displayName: string;

packages/ui/.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/sveltekit';
+import '@gitbutler/design-core/utility';
 import '@gitbutler/design-core/core';
 import '../src/styles/main.css';
 import './stories-styles.css';

apps/desktop/src/components/VirtualList.svelte renamed to packages/ui/src/lib/components/VirtualList.svelte

@@ -14,17 +14,19 @@
 </script>
 
 <script lang="ts" generics="T">
-	import { SETTINGS } from '$lib/settings/userSettings';
-	import { chunk } from '$lib/utils/array';
+	import Button from '$components/Button.svelte';
+	import ScrollableContainer from '$components/scroll/ScrollableContainer.svelte';
+
 	import { debounce } from '$lib/utils/debounce';
-	import { inject } from '@gitbutler/core/context';
-	import { Button, ScrollableContainer } from '@gitbutler/ui';
 
 	import { tick, untrack, type Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import type { ScrollbarVisilitySettings } from '$components/scroll/Scrollbar.svelte';
 
 	type Props = {
 		items: Array<T>;
+		/** Items that are always included. */
+		children?: Snippet<[]>;
 		/** Template for group of items. */
 		chunkTemplate: Snippet<[T[]]>;
 		/** Number of items grouped together. */
@@ -36,6 +38,7 @@
 		initialPosition?: 'top' | 'bottom';
 		/** Auto-scroll to bottom when new items are added (useful for chat). */
 		stickToBottom?: boolean;
+		visibility: ScrollbarVisilitySettings;
 		padding?: {
 			left?: number;
 			right?: number;
@@ -44,17 +47,17 @@
 
 	const {
 		items,
+		children,
 		chunkTemplate,
 		batchSize,
 		onloadmore,
 		grow,
 		padding,
+		visibility,
 		initialPosition = 'top',
 		stickToBottom = false
 	}: Props = $props();
 
-	const userSettings = inject(SETTINGS);
-
 	// Constants
 	const STICKY_DISTANCE = 100;
 	const FALLBACK_HEIGHT = 65;
@@ -96,6 +99,12 @@
 		chunks.slice(start, end).map((data, i) => ({ id: i + start, data }))
 	);
 
+	function chunk<T>(arr: T[], size: number) {
+		return Array.from({ length: Math.ceil(arr.length / size) }, (_v, i) =>
+			arr.slice(i * size, i * size + size)
+		);
+	}
+
 	function sumHeights(startIndex: number, endIndex: number): number {
 		let sum = 0;
 		for (let i = startIndex; i < endIndex; i++) {
@@ -349,12 +358,12 @@
 <ScrollableContainer
 	bind:viewportHeight
 	bind:viewport
-	whenToShow={$userSettings.scrollbarVisibilityState}
 	onscroll={() => {
 		recalculate(true);
 		checkIfNearBottom();
 	}}
 	wide={grow}
+	whenToShow={visibility}
 	{padding}
 >
 	<div
@@ -369,6 +378,7 @@
 				{@render chunkTemplate?.(chunk.data)}
 			</div>
 		{/each}
+		{@render children?.()}
 	</div>
 </ScrollableContainer>
 

packages/ui/src/lib/components/scroll/Scrollbar.svelte

@@ -5,6 +5,8 @@
 		bottom?: number;
 		left?: number;
 	};
+
+	export type ScrollbarVisilitySettings = 'scroll' | 'hover' | 'always';
 </script>
 
 <script lang="ts">
@@ -18,7 +20,7 @@
 		shift?: string;
 		horz?: boolean;
 		zIndex?: string;
-		whenToShow: 'hover' | 'always' | 'scroll';
+		whenToShow: ScrollbarVisilitySettings;
 		onthumbdrag?: (dragging: boolean) => void;
 		onscroll?: (e: Event) => void;
 		onscrollexists?: (hasScroll: boolean) => void;

packages/ui/src/lib/index.ts

@@ -99,7 +99,8 @@ export {
 } from '$components/scroll/ScrollableContainer.svelte';
 export {
 	default as Scrollbar,
-	type ScrollbarPaddingType
+	type ScrollbarPaddingType,
+	type ScrollbarVisilitySettings
 } from '$components/scroll/Scrollbar.svelte';
 
 // Segment Control Components

packages/ui/src/stories/components/VirtualList.stories.svelte

@@ -0,0 +1,50 @@
+<script context="module" lang="ts">
+	import VirtualList from '$lib/components/VirtualList.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const items = Array.from({ length: 20 }, (_, i) => `item-${i + 1}`);
+
+	const { Story } = defineMeta({
+		title: 'VirtualList',
+		component: VirtualList<string>,
+		args: {
+			items,
+			batchSize: 1
+		}
+	});
+</script>
+
+<script lang="ts">
+</script>
+
+<Story name="VirtualList">
+	{#snippet template(args)}
+		<div class="container">
+			<VirtualList {...args} initialPosition="bottom" stickToBottom>
+				{#snippet chunkTemplate(chunk)}
+					{#each chunk as item}
+						<div class="item">
+							{item}
+						</div>
+					{/each}
+				{/snippet}
+			</VirtualList>
+		</div>
+	{/snippet}
+</Story>
+
+<style>
+	.container {
+		display: flex;
+		height: 320px;
+	}
+
+	.item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 300px;
+		height: 150px;
+		border: 1px solid lightgrey;
+	}
+</style>