feat : concept grid view

components/concept/grid.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { ConceptResponseDTO } from '~/netcode/events/dto/conceptresponse.dto';
+import { useConceptStore } from '~/store/concepts.store';
+
+
+const conceptStore = useConceptStore();
+
+const concepyByType = computed(() => {
+    const byType: Record<string, ConceptResponseDTO[]> = {}
+    for (const concept of Object.values(conceptStore.concepts)) {
+        if (!(concept.type.id in byType)) {
+            byType[concept.type.id] = []
+        }
+        byType[concept.type.id].push(concept)
+    }
+    return byType
+})
+
+</script>
+
+<template>
+    <div class="conceptGrid">
+        <div class="conceptType" v-for="concepts, conceptType in concepyByType">
+            <div class="conceptTypeHeader">{{ conceptStore.conceptTypes[conceptType].value }}</div>
+            <div class="concept" v-for="[index, concept] in Object.entries(concepts)">
+                <NuxtImg class="conceptImg" placeholder :alt="concept.value" :src="'/icons/concept/drawing.svg'"
+                    @click="$emit('click', concept.id)">
+                </NuxtImg>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="css">
+div.conceptGrid {
+    max-height: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 50px;
+}
+
+div.conceptType {
+    display: grid;
+    align-content: start;
+    grid-template-columns: 1fr 1fr;
+    flex: 1 1 0px;
+}
+
+.concept {
+    border: 1px solid black;
+    box-sizing: border-box;
+    font-size: x-small;
+    aspect-ratio: 1/1;
+}
+
+div.conceptType>div.conceptTypeHeader {
+    grid-column: 1/3;
+}
+
+
+
+.conceptImg {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+}
+</style>

components/user.vue

@@ -13,10 +13,8 @@ const user = await userStore.fetchUser(props.id);
 
 <template>
   <div class="user">
-    <img
-      class="user-avatar"
-      :src="`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.webp?size=32`"
-    />
+    <img loading="lazy" class="user-avatar"
+      :src="`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.webp?size=32`" />
     {{ user?.username }}
   </div>
 </template>