UI improvments

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

@@ -9,7 +9,7 @@
 	</mat-expansion-panel-header>
 
 	<div class="priority-statement">
-		<mat-icon color="primary">info</mat-icon>
+		<mat-icon aria-hidden="true">info_outline</mat-icon>
 		<span>{{ tr().rules.priorityInfo }}</span>
 	</div>
 
@@ -18,15 +18,22 @@
 			<div
 				class="rule-item"
 				cdkDrag
+				cdkDragLockAxis="y"
+				[cdkDragStartDelay]="{ touch: 180, mouse: 0 }"
 				[cdkDragDisabled]="editingRuleId() === rule.id"
 				[class.editing]="editingRuleId() === rule.id"
 			>
 				@if (editingRuleId() !== rule.id) {
-					<div class="rule-drag-grip">
-						<mat-icon class="drag-handle-icon">drag_handle</mat-icon>
-					</div>
 					<div class="rule-display">
 						<div class="rule-header">
+							<div
+								class="rule-drag-grip"
+								cdkDragHandle
+								[title]="tr().rules.dragRule"
+								aria-hidden="true"
+							>
+								<mat-icon>drag_indicator</mat-icon>
+							</div>
 							<mat-slide-toggle
 								[checked]="rule.enabled"
 								(change)="toggleRule(rule.id)"
@@ -37,41 +44,53 @@
 									{{ rule.name }}</span
 								>
 							</mat-slide-toggle>
-							<div class="rule-actions">
-								<button
-									mat-icon-button
-									[disabled]="i === 0"
-									[aria-label]="tr().rules.moveRuleUp"
-									(click)="moveRule(i, -1, $event)"
-								>
-									<mat-icon>keyboard_arrow_up</mat-icon>
-								</button>
-								<button
-									mat-icon-button
-									[disabled]="i === rules.length - 1"
-									[aria-label]="tr().rules.moveRuleDown"
-									(click)="moveRule(i, 1, $event)"
-								>
-									<mat-icon>keyboard_arrow_down</mat-icon>
-								</button>
-								<button
-									mat-icon-button
-									[aria-label]="tr().rules.editRule"
-									(click)="startEdit(rule, $event)"
-								>
-									<mat-icon>edit</mat-icon>
-								</button>
-								<button
-									mat-icon-button
-									color="warn"
-									[aria-label]="tr().rules.deleteRule"
-									(click)="deleteRule(rule.id, $event)"
-								>
-									<mat-icon>delete</mat-icon>
-								</button>
-							</div>
 						</div>
-						<div class="rule-summary" [innerHTML]="getRuleSummary(rule)"></div>
+						<div class="rule-summary">
+							<span
+								class="rule-force"
+								[class.obligation]="rule.force === 'obligation'"
+							>
+								{{
+									rule.force === 'obligation'
+										? tr().rules.obligation
+										: tr().rules.preference
+								}}
+							</span>
+							<span [innerHTML]="getRuleSummary(rule)"></span>
+						</div>
+						<div class="rule-actions">
+							<button
+								mat-icon-button
+								[disabled]="i === 0"
+								[aria-label]="tr().rules.moveRuleUp"
+								(click)="moveRule(i, -1, $event)"
+							>
+								<mat-icon aria-hidden="true">keyboard_arrow_up</mat-icon>
+							</button>
+							<button
+								mat-icon-button
+								[disabled]="i === rules.length - 1"
+								[aria-label]="tr().rules.moveRuleDown"
+								(click)="moveRule(i, 1, $event)"
+							>
+								<mat-icon aria-hidden="true">keyboard_arrow_down</mat-icon>
+							</button>
+							<button
+								mat-icon-button
+								[aria-label]="tr().rules.editRule"
+								(click)="startEdit(rule, $event)"
+							>
+								<mat-icon>edit</mat-icon>
+							</button>
+							<button
+								mat-icon-button
+								color="warn"
+								[aria-label]="tr().rules.deleteRule"
+								(click)="deleteRule(rule.id, $event)"
+							>
+								<mat-icon>delete</mat-icon>
+							</button>
+						</div>
 					</div>
 				} @else {
 					<div class="rule-editor">