feat: enhance user input and rules panel components

- Updated dark-light mode button styles for improved responsiveness.
- Enhanced rules panel with additional buttons for moving rules up and down, and updated styles for better layout.
- Added active rule count display in the rules panel header.
- Improved user input component layout with section headings and updated button styles.
- Refactored day input component to use grid layout for better alignment and responsiveness.
- Added new translations for user input and rules panel features.
- Implemented tests for new functionality in rules panel and day input components.
- Added application routes test to ensure correct routing configuration.

src/app/components/rules-panel/rules-panel.ts

@@ -140,12 +140,23 @@ export class RulesPanel {
 		return this.ruleService.rules;
 	}
 
+	protected get activeRuleCount(): number {
+		return this.rules.filter((rule) => rule.enabled).length;
+	}
+
 	public drop(event: CdkDragDrop<VacationRule[]>) {
 		if (event.previousIndex !== event.currentIndex) {
 			this.ruleService.reorderRules(event.previousIndex, event.currentIndex);
 		}
 	}
 
+	public moveRule(index: number, offset: -1 | 1, event: Event) {
+		event.stopPropagation();
+		const destination = index + offset;
+		if (destination >= 0 && destination < this.rules.length)
+			this.ruleService.reorderRules(index, destination);
+	}
+
 	public toggleRule(id: string) {
 		this.ruleService.toggleRule(id);
 	}