src/app/components/app/app.component.html

@@ -5,12 +5,9 @@
 @if (showControls) {
     <div class="controls">
         <mat-button-toggle-group vertical multiple class="generator-toggles">
-            <mat-button-toggle [checked]="showRegon" (change)="showRegon = $event.source.checked; saveGeneratorSettings()">REGON</mat-button-toggle>
-            <mat-button-toggle [checked]="showNip" (change)="showNip = $event.source.checked; saveGeneratorSettings()">NIP</mat-button-toggle>
-            <mat-button-toggle [checked]="showPesel" (change)="showPesel = $event.source.checked; saveGeneratorSettings()">PESEL</mat-button-toggle>
-            <mat-button-toggle [checked]="showIdentityCard" (change)="showIdentityCard = $event.source.checked; saveGeneratorSettings()">DOWÓD</mat-button-toggle>
-            <mat-button-toggle [checked]="showMobile" (change)="showMobile = $event.source.checked; saveGeneratorSettings()">KOMÓRA</mat-button-toggle>
-            <mat-button-toggle [checked]="showIban" (change)="showIban = $event.source.checked; saveGeneratorSettings()">IBAN</mat-button-toggle>
+            @for (gen of generators; track gen.id) {
+                <mat-button-toggle [checked]="gen.show" (change)="toggleGenerator(gen.id, $event.source.checked)">{{gen.label}}</mat-button-toggle>
+            }
         </mat-button-toggle-group>
 
         <mat-button-toggle-group vertical class="theme-toggles">
@@ -23,22 +20,16 @@
     </div>
 }
 <div class="generators">
-    @if (showRegon) {
-        <app-regon></app-regon>
+    @for (id of activeGenerators; track id) {
+        @if (isGeneratorVisible(id)) {
+            @switch (id) {
+                @case ('regon') { <app-regon></app-regon> }
+                @case ('nip') { <app-nip></app-nip> }
+                @case ('pesel') { <app-pesel></app-pesel> }
+                @case ('identityCard') { <app-identity-card></app-identity-card> }
+                @case ('mobile') { <app-mobile></app-mobile> }
+                @case ('iban') { <app-iban></app-iban> }
             }
-    @if (showNip) {
-        <app-nip></app-nip>
         }
-    @if (showPesel) {
-        <app-pesel></app-pesel>
-    }
-    @if (showIdentityCard) {
-        <app-identity-card></app-identity-card>
-    }
-    @if (showMobile) {
-        <app-mobile></app-mobile>
-    }
-    @if (showIban) {
-        <app-iban></app-iban>
     }
 </div>

src/app/components/app/app.component.ts

@@ -8,12 +8,16 @@ import { ChangeDetectorRef, Component, ElementRef, HostListener, OnInit } from '
 })
 export class AppComponent implements OnInit {
 
-  showRegon = true;
-  showNip = true;
-  showPesel = true;
-  showIdentityCard = true;
-  showIban = true;
-  showMobile = true;
+  generators = [
+    { id: 'regon', label: 'REGON', show: true },
+    { id: 'nip', label: 'NIP', show: true },
+    { id: 'pesel', label: 'PESEL', show: true },
+    { id: 'identityCard', label: 'DOWÓD', show: true },
+    { id: 'mobile', label: 'KOMÓRA', show: true },
+    { id: 'iban', label: 'IBAN', show: true }
+  ];
+
+  activeGenerators: string[] = ['regon', 'nip', 'pesel', 'identityCard', 'mobile', 'iban'];
 
   showControls = false;
   isInitialVisible = true;
@@ -40,12 +44,20 @@ export class AppComponent implements OnInit {
     const savedGenerators = localStorage.getItem('generatorSettings');
     if (savedGenerators) {
       const settings = JSON.parse(savedGenerators);
-      this.showRegon = settings.showRegon ?? true;
-      this.showNip = settings.showNip ?? true;
-      this.showPesel = settings.showPesel ?? true;
-      this.showIdentityCard = settings.showIdentityCard ?? true;
-      this.showIban = settings.showIban ?? true;
-      this.showMobile = settings.showMobile ?? true;
+      this.generators.forEach(g => {
+        g.show = settings[g.id] ?? true;
+      });
+    }
+
+    const savedOrder = localStorage.getItem('generatorOrder');
+    if (savedOrder) {
+      this.activeGenerators = JSON.parse(savedOrder);
+      // Ensure all current generators are present in the order (for migration/updates)
+      this.generators.forEach(g => {
+        if (!this.activeGenerators.includes(g.id)) {
+          this.activeGenerators.push(g.id);
+        }
+      });
     }
 
     setTimeout(() => {
@@ -54,24 +66,48 @@ export class AppComponent implements OnInit {
     }, 3000);
   }
 
+  toggleGenerator(id: string, checked: boolean) {
+    const generator = this.generators.find(g => g.id === id);
+    if (generator) {
+      generator.show = checked;
+      if (checked) {
+        // Add to end if not already in activeGenerators (it should be, but just in case)
+        if (!this.activeGenerators.includes(id)) {
+          this.activeGenerators.push(id);
+        } else {
+          // If it was already there but we want it at the end when RE-ENABLING:
+          const index = this.activeGenerators.indexOf(id);
+          this.activeGenerators.splice(index, 1);
+          this.activeGenerators.push(id);
+        }
+      }
+      this.saveGeneratorSettings();
+    }
+  }
+
+  saveGeneratorSettings() {
+    const settings: { [key: string]: boolean } = {};
+    this.generators.forEach(g => {
+      settings[g.id] = g.show;
+    });
+    localStorage.setItem('generatorSettings', JSON.stringify(settings));
+    localStorage.setItem('generatorOrder', JSON.stringify(this.activeGenerators));
+  }
+
+  getGenerator(id: string) {
+    return this.generators.find(g => g.id === id);
+  }
+
+  isGeneratorVisible(id: string): boolean {
+    return this.getGenerator(id)?.show ?? false;
+  }
+
   setTheme(theme: string) {
     this.selectedTheme = theme;
     localStorage.setItem('selectedTheme', theme);
     this.applyTheme(theme);
   }
 
-  saveGeneratorSettings() {
-    const settings = {
-      showRegon: this.showRegon,
-      showNip: this.showNip,
-      showPesel: this.showPesel,
-      showIdentityCard: this.showIdentityCard,
-      showIban: this.showIban,
-      showMobile: this.showMobile
-    };
-    localStorage.setItem('generatorSettings', JSON.stringify(settings));
-  }
-
   private applyTheme(theme: string) {
     const body = document.body;
     this.themes.forEach(t => {