improve search + add two col roster layout on larger screens (#8)

src/components/RosterList.vue

@@ -69,7 +69,10 @@ function handleTap(event: TouchEvent, member: Member) {
     <!-- <RankFilter @update="rank = $event" :rank="rank" /> -->
     <RoleFilter @update="role = $event" :role="role" />
     <div class="w-full flex text-gray-400 text-sm">Double click to select players</div>
-    <div class="grid grid-cols-2 md:grid-cols-1 gap-x-4" :class="{ 'opacity-40': isFetching }">
+    <div
+      class="grid md:grid-cols-2 grid-cols-1 gap-x-4 w-auto md:w-96"
+      :class="{ 'opacity-40': isFetching }"
+    >
       <div
         class="flex justify-between hover:bg-[#454545] cursor-pointer py-1 rounded-sm"
         :class="{ 'opacity-50': selectedNames.has(member.character.name) }"

src/stores/__tests__/members.store.spec.ts

@@ -101,6 +101,12 @@ describe('members store', () => {
     store.filter = 'Quelish';
     expect(store.filteredMembers.length).toBe(1);
 
+    store.filter = 'Devølutiøn';
+    expect(store.filteredMembers.length).toBe(1);
+
+    store.filter = 'Devolution'; // check diacritics are normalised
+    expect(store.filteredMembers.length).toBe(1);
+
     // no match filter
     store.filter = 'XXXXXXXXXXXXXXX';
     expect(store.filteredMembers.length).toBe(0);

src/stores/members.store.ts

@@ -54,7 +54,13 @@ export const useMembersStore = defineStore('members', () => {
 
   const selectedNames = reactive(new Set<string>());
   const members = computed(
-    () => data.value?.members.filter((m) => m.character.active_spec_name) ?? []
+    () =>
+      data.value?.members
+        .filter((m) => m.character.active_spec_name)
+        .map((m) => ({
+          ...m,
+          search: m.character.name.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+        })) ?? []
   );
 
   const pickedMembers = ref<Member[]>([]);
@@ -131,7 +137,12 @@ export const useMembersStore = defineStore('members', () => {
             // apply text filter
             const textFilter =
               filter.value === '' ||
-              [member.character.name, member.character.class, member.character.active_spec_name]
+              [
+                member.character.name,
+                member.character.class,
+                member.character.active_spec_name,
+                member.search
+              ]
                 .join(' ')
                 .toLowerCase()
                 .includes(filter.value.toLowerCase());

src/types/index.ts

@@ -80,6 +80,7 @@ export interface GuildProfile {
 export interface Member {
   rank: number;
   character: Character;
+  search?: string;
   captain?: boolean;
   pug?: boolean;
   picked?: boolean;