terminal icon indicating copy to clipboard operation
terminal copied to clipboard

Add smooth tab reorder animation during drag

Open Z-a-r-a-k-i opened this issue 2 months ago • 6 comments

Summary of the Pull Request

Adds smooth tab reorder animation during same-window tab dragging. When a tab is dragged, other tabs animate to show where the tab will be inserted, similar to Chrome/Edge behavior.

References and Relevant Issues

  • Related to #14900 (Tab drag/drop/tear-out gaps megathread)

Detailed Description of the Pull Request / Additional comments

  • Implements TabReorderAnimator class that uses TranslateTransform to animate tabs
  • Same-window drags: tabs shift left/right to create visual gap at insertion point
  • Cross-window drags: also animates to show insertion point
  • On drop: transforms snap back immediately to avoid conflicting with TabView's reorder animation
  • Respects DisableAnimations global setting (checked at init and on settings reload)
  • Disables TabView's built-in ItemContainerTransitions during drag to prevent conflicts

Validation Steps Performed

  • [x] Same-window tab reordering animates smoothly
  • [x] Cross-window tab drops animate correctly
  • [x] Animation respects DisableAnimations setting
  • [x] Drag leave resets animations properly
  • [x] Rapid pointer movement doesn't leave tabs stuck (storyboard conflicts resolved)
  • [x] Settings reload updates animation preference

PR Checklist

  • [x] Related to #14900
  • [x] Tests added/passed (manual validation - UI animation feature)
  • [x] Documentation updated (N/A - internal implementation)
  • [x] Schema updated (N/A - no new settings)

Z-a-r-a-k-i avatar Nov 30 '25 18:11 Z-a-r-a-k-i

@check-spelling-bot Report

:red_circle: Please review

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

Unrecognized words (1)

Storyboards

To accept these unrecognized words as correct, you could run the following commands

... in a clone of the [email protected]:Z-a-r-a-k-i/terminal.git repository on the feature/tab-reorder-animation branch (:information_source: how do I use this?):

curl -s -S -L 'https://raw.githubusercontent.com/check-spelling/check-spelling/v0.0.25/apply.pl' |
perl - 'https://github.com/microsoft/terminal/actions/runs/19802884705/attempts/1' &&
git commit -m 'Update check-spelling metadata'
Warnings :warning: (1)

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

:warning: Warnings Count
:warning: ignored-expect-variant 1

See :warning: Event descriptions for more information.

:pencil2: Contributor please read this

By default the command suggestion will generate a file named based on your commit. That's generally ok as long as you add the file to your commit. Someone can reorganize it later.

If the listed items are:

  • ... misspelled, then please correct them instead of using the command.
  • ... names, please add them to .github/actions/spelling/allow/names.txt.
  • ... APIs, you can add them to a file in .github/actions/spelling/allow/.
  • ... just things you're using, please add them to an appropriate file in .github/actions/spelling/expect/.
  • ... tokens you only need in one place and shouldn't generally be used, you can add an item in an appropriate file in .github/actions/spelling/patterns/.

See the README.md in each directory for more information.

:microscope: You can test your commits without appending to a PR by creating a new branch with that extra change and pushing it to your fork. The check-spelling action will run in response to your push -- it doesn't require an open pull request. By using such a branch, you can limit the number of typos your peers see you make. :wink:

If the flagged items are :exploding_head: false positives

If items relate to a ...

  • binary file (or some other file you wouldn't want to check at all).

    Please add a file path to the excludes.txt file matching the containing file.

    File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

    ^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

  • well-formed pattern.

    If you can write a pattern that would match it, try adding it to the patterns.txt file.

    Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

    Note that patterns can't match multiline strings.

github-actions[bot] avatar Nov 30 '25 18:11 github-actions[bot]

@microsoft-github-policy-service agree

Z-a-r-a-k-i avatar Nov 30 '25 18:11 Z-a-r-a-k-i

WHOA. Do you have a video of this? It sounds great!

DHowett avatar Dec 01 '25 23:12 DHowett

/azp run

DHowett avatar Dec 01 '25 23:12 DHowett

Azure Pipelines successfully started running 1 pipeline(s).

azure-pipelines[bot] avatar Dec 01 '25 23:12 azure-pipelines[bot]

WHOA. Do you have a video of this? It sounds great!

Demo

Z-a-r-a-k-i avatar Dec 02 '25 02:12 Z-a-r-a-k-i