add padding to chat and refactor badge system

src/components/TwitchChat.vue

@@ -1,14 +1,8 @@
 <script lang="ts">
 import { ref, type Ref } from 'vue'
 import BadgeVue from './ChatBadge.vue'
-
-interface Badge {
-    id: string,
-    title: string,
-    setId: string,
-    version: string,
-    images: { [k:string]: string }
-}
+import { getBadges } from '@/assets/badges'
+import type { Badge } from '@/assets/types'
 
 export default {
   props: {
@@ -52,7 +46,6 @@ export default {
         chatStatusMessage.textContent = `Connected to ${this.channelName}`
       } else {
         this.messages.push(JSON.parse(message.data))
-        this.getBadges(JSON.parse(message.data))
         this.clearMessages()
         this.scrollToBottom(chatList)
       }
@@ -75,26 +68,15 @@ export default {
       }
     },
     getBadges(message: { username: string, channel: string, message: string, messageType: string, tags: Record<string, string> }) {
-      let badgesString = message.tags.badges
+      let badgesString = message.tags.badges;
       if (!badgesString) return;
-      let badges = badgesString.split(',')
+      let badges = badgesString.split(',');
       let formatedBadges = badges.map((badgeWithVersion) => {
-        const [setId, version] = badgeWithVersion.split('/')
-        return { setId, version }
-      })
+        const [setId, version] = badgeWithVersion.split('/');
+        return { setId, version };
+      });
 
-
-      const foundBadges = []
-      for(let badgeToFind of formatedBadges) {
-        const badge = this.badges
-          .filter((badge) => badge.setId === badgeToFind.setId)
-          .find((badge) => badge.version === badgeToFind.version);
-
-          if(badge)
-            foundBadges.push(badge)
-      }
-
-      return foundBadges
+      return getBadges(this.badges, formatedBadges);
     }
   },
   components: {
@@ -107,7 +89,7 @@ export default {
     
     <!-- SYSTEM MESSAGES -->
     <ul
-      class="overflow-y-scroll overflow-x-hidden whitespace-pre-wrap h-[46.875rem]"
+      class="overflow-y-scroll overflow-x-hidden space-y-1 whitespace-pre-wrap h-[46.875rem]"
       ref="chatList"
     >
       <li>