feat(assets): new assets loading system (currently only for images)

app/components/Contact/TopScreen/Notifications.vue

@@ -1,14 +1,8 @@
 <script setup lang="ts">
-import NOTIFICATION_IMAGE from "/assets/images/contact/bottom-screen/notification.webp";
-import TITLE_IMAGE from "/assets/images/contact/top-screen/title.webp";
-
 // text color:
 const store = useContactStore();
 
-const [notificationImage, titleImage] = useImages(
-  NOTIFICATION_IMAGE,
-  TITLE_IMAGE,
-);
+const { assets } = useAssets();
 
 useRender((ctx) => {
   ctx.globalAlpha = store.outro.stage2Opacity;
@@ -20,7 +14,7 @@ useRender((ctx) => {
     const y = 169 - 24 * index + store.notificationsYOffset;
     if (y < -24) break;
 
-    ctx.drawImage(notificationImage!, 21, y);
+    ctx.drawImage(assets.contact.bottomScreen.notification, 21, y);
 
     const content = store.notifications[i]!;
     ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
@@ -32,7 +26,7 @@ useRender((ctx) => {
     ? store.intro.stage1Opacity
     : store.outro.stage2Opacity;
   ctx.drawImage(
-    titleImage!,
+    assets.contact.topScreen.title,
     21,
     store.isIntro
       ? store.intro.titleY