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

app/components/Settings/BottomScreen/Menus/Clock/Menu.vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
-import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/clock/clock-active.webp";
-import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/clock/clock-disabled.png";
-import ALARM_IMAGE from "/assets/images/settings/top-screen/clock/alarm.webp";
-import TIME_IMAGE from "/assets/images/settings/top-screen/clock/time.webp";
-import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
-
 const props = defineProps<{
   x: number;
   y: number;
@@ -13,21 +6,7 @@ const props = defineProps<{
 
 const settingsStore = useSettingsStore();
 
-const [
-  menuImage,
-  menuActiveImage,
-  menuDisabledImage,
-  alarmImage,
-  timeImage,
-  dateImage,
-] = useImages(
-  MENU_IMAGE,
-  MENU_ACTIVE_IMAGE,
-  MENU_DISABLED_IMAGE,
-  ALARM_IMAGE,
-  TIME_IMAGE,
-  DATE_IMAGE,
-);
+const { assets } = useAssets();
 
 const isOpen = computed(() => settingsStore.isMenuOpen("clock"));
 const isAnyOtherMenuOpen = computed(() =>
@@ -41,22 +20,26 @@ useRender((ctx) => {
 
   if (isOpen.value || animation.playing) {
     ctx.drawImage(
-      timeImage!,
+      assets.settings.topScreen.clock.time,
       48 - animation.stage2Offset,
       -48 + animation.stage1Offset,
     );
     ctx.drawImage(
-      dateImage!,
+      assets.settings.topScreen.clock.date,
       0,
       -96 + animation.stage2Offset + animation.stage1Offset,
     );
-    ctx.drawImage(alarmImage!, 0, -48 + animation.stage1Offset);
+    ctx.drawImage(
+      assets.settings.topScreen.clock.alarm,
+      0,
+      -48 + animation.stage1Offset,
+    );
 
-    ctx.drawImage(menuActiveImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.clock.clockActive, 0, 0);
   } else if (isAnyOtherMenuOpen.value) {
-    ctx.drawImage(menuDisabledImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.clock.clockDisabled, 0, 0);
   } else {
-    ctx.drawImage(menuImage!, 0, 0);
+    ctx.drawImage(assets.settings.topScreen.clock.clock, 0, 0);
   }
 });