fix: use select control for role filter

frontend/src/app/app.component.spec.ts

@@ -89,6 +89,24 @@ describe('AppComponent', () => {
     assert.equal(calls, 1);
   });
 
+  it('exposes role options and sends the selected role as a filter', () => {
+    let requestedRole = '';
+    const api = {
+      searchPlayers: (filters: { role: string }) => {
+        requestedRole = filters.role;
+        return of({ count: 0, results: [] });
+      },
+    } as unknown as PlayerApiService;
+    const component = new AppComponent(api);
+
+    assert.ok(component.roles.includes('3 and D wing'));
+
+    component.filters.role = '3 and D wing';
+    component.search();
+
+    assert.equal(requestedRole, '3 and D wing');
+  });
+
   it('shows the loading placeholder only before results exist', () => {
     const api = {
       searchPlayers: () => of({ count: samplePlayers.length, results: samplePlayers }),