feat(dashboard): sort/filter by color

dashboard/src/components/list/ListControl.svelte

@@ -141,6 +141,7 @@ function resetPage() {
                     <option value="pronouns">Pronouns</option>
                     <option value="birthday">Birthday</option>
                     {/if}
+                    <option value="color">Color</option>
                     {#if !pageOptions.isPublic}
                     <option value="created">Creation date</option>
                     {/if}
@@ -391,6 +392,16 @@ function resetPage() {
                         </InputGroup>
                     </Col>
                 {/if}
+                <Col xs={12} md={6} lg={4} class="mb-2">
+                    <InputGroup>
+                        <InputGroupText>Color</InputGroupText>
+                        <Input type="select" bind:value={options.filter.color} on:change={() => resetPage()}>
+                            <option value="all">All</option>
+                            <option value="include">With color</option>
+                            <option value="exclude">Without color</option>
+                        </Input>
+                    </InputGroup>
+                </Col>
             </Row>
         {/if}
     </CardBody>

dashboard/src/components/list/functions.ts

@@ -121,6 +121,22 @@ function sort<T extends Member|Group>(list: T[], options: ListOptions): T[] {
 
                 return aa.localeCompare(bb);
             });
+        } else if (options.sort === 'color') {
+            newList = [...list].sort((a, b) => {
+                let aa = Number("0x" + a.color);
+                let bb = Number("0x" + b.color);
+
+                if (a.color === null) return 1;
+                if (b.color === null) return -1;
+
+                if (aa === bb) return a.name.localeCompare(b.name);
+
+                if (Number.isNaN(aa)) return 1;
+                if (Number.isNaN(bb)) return -1;
+
+                if (aa > bb) return 1;
+                if (aa < bb) return -1;
+            })
         }
     return newList;
 }

dashboard/src/components/list/types.ts

@@ -44,10 +44,11 @@ export interface ListOptions {
         display_name: "all"|"include"|"exclude",
         avatar_url: "all"|"include"|"exclude",
         icon: "all"|"include"|"exclude",
+        color: "all"|"include"|"exclude",
 
     }
     // what it says on the tin
-    sort: 'name'|'description'|'birthday'|'pronouns'|'display_name'|'id'|'none'|'created',
+    sort: 'name'|'description'|'birthday'|'pronouns'|'display_name'|'id'|'none'|'created' | 'color',
     order: "ascending"|"descending",
     show: "all"|"private"|"public",
     // so we can change the key for duplicate members on the randomize page
@@ -109,7 +110,8 @@ export const defaultListOptions: ListOptions = {
         description: 'all',
         pronouns: 'all',
         avatar_url: 'all',
-        icon: 'all'
+        icon: 'all',
+        color: 'all',
 
     },
     sort: 'name',