docs: add demo gif to README, exclude from VSIX

Author: JohannesHoppe

.vscodeignore

@@ -34,6 +34,7 @@ tests/**
 # Design files
 logo.svg
 logo.ai
+*.gif
 
 # Source maps (keep for production debugging)
 # **/*.map

README.md

@@ -4,6 +4,10 @@
 
 # Mini TypeScript Hero – Small hero. Big cleanup!
 
+<div align="center">
+  <img src="https://raw.githubusercontent.com/angular-schule/mini-typescript-hero/master/demo.gif" alt="Mini TypeScript Hero Demo" width="800">
+</div>
+
 **One keystroke. One click. Hundreds of files organized.** — A lightweight, modern VSCode extension that sorts and organizes your TypeScript/JavaScript imports.
 
 **Read the full story:** [TypeScript Hero is dead (is yet another VS Code extension gone forever?)](https://angular.schule/blog/2026-03-mini-typescript-hero)

demo.gif

@@ -1,14 +1,10 @@
-// Demo file for video - shows the full power of Mini TypeScript Hero
-// Press Ctrl+Alt+O (or Cmd+Alt+O on macOS) to organize imports
-
-import { UserDetail } from './components/user-detail';
-import { Component } from '@angular/core';
-import { UnusedService } from './services/unused';
-import {Router} from "@angular/router"
+import { Component, inject, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
-import {OnInit, inject} from "@angular/core"
+
 import { BookList } from './components/book-list';
-import {of} from "rxjs"
+import { UserDetail } from './components/user-detail';
 
 @Component({
   selector: 'app-demo',
@@ -40,6 +36,4 @@ export class DemoComponent implements OnInit {
   private transform(value: string) {
     return of(value);
   }
-}
-
-// Note: UnusedService is imported but never used - it will be removed!
+}