Follow scroll

<script lang="ts">
	import { onDestroy } from 'svelte';
	import FollowScroll from '#lib/components/coral/kit/follow-scroll/follow-scroll.svelte';
	import { Button } from '#lib/components/ui/button/index.js';

	const steps = [
		'Restoring cache',
		'Installing dependencies',
		'Running tests',
		'Type-checking',
		'Building',
		'Uploading artefacts'
	];

	let lines = $state<string[]>(['Queued', 'Starting runner']);
	let pinned = $state(true);
	let timer: ReturnType<typeof setInterval> | undefined;

	function start() {
		clearInterval(timer);
		lines = ['Queued', 'Starting runner'];
		let step = 0;
		timer = setInterval(() => {
			lines = [...lines, `${steps[step % steps.length]} (${lines.length})`];
			step++;
			if (lines.length > 60) clearInterval(timer);
		}, 220);
	}

	onDestroy(() => clearInterval(timer));
</script>

<div class="flex w-full max-w-xl flex-col gap-3">
	<div class="flex items-center gap-3">
		<Button variant="outline" size="sm" onclick={start}>Run the build</Button>
		<span class="text-sm text-muted-foreground">
			Following: {pinned ? 'yes' : 'no - scroll back down to resume'}
		</span>
	</div>

	<FollowScroll
		bind:pinned
		count={lines.length}
		class="h-56 rounded-lg border"
		aria-label="Build log"
	>
		<ol class="p-3 font-mono text-xs">
			{#each lines as line, index (index)}
				<li class="py-0.5 text-muted-foreground">{line}</li>
			{/each}
		</ol>
	</FollowScroll>
</div>

<script lang="ts">
	import Textarea from '#lib/components/coral/kit/textarea/textarea.svelte';
	import FollowScroll from '#lib/components/coral/kit/follow-scroll/follow-scroll.svelte';
	import Avatar from '#lib/components/coral/kit/avatar/avatar.svelte';

	type Message = { id: number; from: string; body: string };

	let messages = $state<Message[]>([
		{ id: 1, from: 'Amara Diallo', body: 'The staging deploy is green again.' },
		{ id: 2, from: 'Wei Zhang', body: 'Nice. Was it the lockfile?' },
		{ id: 3, from: 'Amara Diallo', body: 'Yes - regenerated it and the build step passed.' },
		{ id: 4, from: 'Priya Sharma', body: 'I will roll it to production after the review.' },
		{ id: 5, from: 'Kenji Tanaka', body: 'Adding the changelog entry now.' }
	]);

	let draft = $state('');

	function send(text: string) {
		messages = [...messages, { id: messages.length + 1, from: 'You', body: text.trim() }];
		draft = '';
	}
</script>

<div class="flex w-full max-w-md flex-col gap-2">
	<FollowScroll count={messages.length} class="h-52 rounded-lg border" aria-label="Thread">
		<ul class="flex flex-col gap-3 p-3">
			{#each messages as message (message.id)}
				<li class="flex items-start gap-2">
					<Avatar name={message.from} size="sm" />
					<div class="min-w-0">
						<p class="text-xs text-muted-foreground">{message.from}</p>
						<p class="text-sm">{message.body}</p>
					</div>
				</li>
			{/each}
		</ul>
	</FollowScroll>

	<Textarea
		bind:value={draft}
		rows={1}
		maxRows={4}
		submitOn="enter"
		onsubmit={send}
		placeholder="Message the thread"
		aria-label="Message the thread"
	/>
</div>