feat(assets): use single texture atlas instead of loading all images individually

app/components/Settings/TopScreen/Calendar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
 
-const app = useAppStore();
 const { assets } = useAssets();
 
 onRender((ctx) => {
@@ -14,7 +13,6 @@ onRender((ctx) => {
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;
   const CALENDAR_TOP = 64;
-  const SELECTOR_SIZE = 13;
 
   ctx.fillStyle = "#343434";
 
@@ -25,16 +23,16 @@ onRender((ctx) => {
   const firstDay = new Date(year, month, 1).getDay();
   const daysInMonth = new Date(year, month + 1, 0).getDate();
 
-  ctx.drawImage(
-    assets.home.topScreen.calendar.calendar,
+  assets.images.home.topScreen.calendar.calendar.draw(
+    ctx,
     CALENDAR_LEFT - 3,
     CALENDAR_TOP - 33,
   );
 
   const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
   if (extraRow) {
-    ctx.drawImage(
-      assets.home.topScreen.calendar.lastRow,
+    assets.images.home.topScreen.calendar.lastRow.draw(
+      ctx,
       CALENDAR_LEFT - 3,
       CALENDAR_TOP + 79,
     );
@@ -53,16 +51,11 @@ onRender((ctx) => {
         const cellTop = CALENDAR_TOP + col * 16;
 
         if (now.getDate() === day) {
-          ctx.drawImage(
-            assets.home.topScreen.calendar.daySelectorsSheet,
-            0,
-            (app.color.row * 4 + app.color.col) * SELECTOR_SIZE,
-            SELECTOR_SIZE,
-            SELECTOR_SIZE,
+          assets.images.home.topScreen.calendar.daySelectorsSheet.draw(
+            ctx,
             cellLeft + 1,
             cellTop + 1,
-            SELECTOR_SIZE,
-            SELECTOR_SIZE,
+            { colored: true },
           );
         }