feat: animate console jump to latest button

This commit is contained in:
2026-10-01 11:07:50 +09:00
parent 1bc1f54ea0
commit b5ae7dcd64
3 changed files with 63 additions and 0 deletions
@@ -1,6 +1,8 @@
<script lang="ts">
import { invalidateAll } from "$app/navigation";
import { tick, untrack, type SvelteComponent } from "svelte";
import { prefersReducedMotion } from "svelte/motion";
import { fly } from "svelte/transition";
import ConsoleLineItem from "$lib/workspace/console/ConsoleLineItem.svelte";
import ConsoleTurnNavigation from "$lib/workspace/console/ConsoleTurnNavigation.svelte";
import ConsoleDisplayStateView from "$lib/workspace/console/ConsoleDisplayState.svelte";
@@ -1774,6 +1776,7 @@
{#if !autoFollowConsole && lines.length > 0 && (consoleDisplayState.kind === "ready" || consoleDisplayState.kind === "stale")}
<button
class="console-jump-latest"
transition:fly={{ y: 6, duration: prefersReducedMotion.current ? 0 : 160 }}
type="button"
aria-label="Jump to latest"
title="Jump to latest"
@@ -2244,6 +2247,17 @@
border-color: var(--tui-cyan);
}
@media (prefers-reduced-motion: no-preference) {
.console-jump-latest {
transition: translate 140ms ease-out, color 140ms ease-out,
border-color 140ms ease-out;
}
.console-jump-latest:hover {
translate: 0 -2px;
}
}
.console-jump-latest:focus-visible {
outline: 2px solid var(--tui-cyan);
outline-offset: 2px;
@@ -19,6 +19,9 @@ import { EditorView } from "@codemirror/view";
import * as alerts from "$lib/workspace/alerts/store";
import ConsolePage from "./+page.svelte";
// happy-dom does not implement Web Animations. Motion itself is covered in Chromium.
vi.mock("svelte/motion", () => ({ prefersReducedMotion: { current: true } }));
const multiplexer = vi.hoisted(() => {
type Listener = {
onFrame(frame: unknown): void;