feat(projects): load preview image in component instead of doing it in the store

app/components/Projects/TopScreen/Previews.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const store = useProjectsStore();
+
+const projectPreviews = ref<HTMLImageElement[]>([]);
+
+onMounted(() => {
+  console.log(store.projects);
+  projectPreviews.value = useImages(...store.projects.map((x) => x.preview));
+});
+
+useRender((ctx) => {
+  const project = store.projects[store.currentProject];
+  if (!project) return;
+
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+
+  const preview = projectPreviews.value[store.currentProject];
+  if (!preview) return;
+
+  const x = (256 - preview.width) / 2;
+  const y = (192 - preview.height) / 2 + 10;
+  ctx.translate(x, y);
+
+  ctx.fillStyle = "#a6a6a6";
+  ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
+
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+  ctx.shadowBlur = 10;
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+
+  ctx.drawImage(preview, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>