1

app/src/components/GridCanvas/index.vue

@@ -8,6 +8,7 @@ import IconCard from '@/components/IconCard/index.vue';
 import WidgetCard from '@/components/WidgetCard/index.vue';
 
 type GridItemType = 'icon' | 'widget';
+type GridItemSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';
 
 interface Icon {
   id: string;
@@ -15,9 +16,10 @@ interface Icon {
   url: string;
   img?: string;
   bgColor?: string;
+  size?: GridItemSize;
 }
 
-type WidgetSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';
+type WidgetSize = GridItemSize;
 interface Widget {
   id: string;
   component: string;
@@ -217,7 +219,7 @@ onMounted(async () => {
     dragEnabled: true,
     dragStartPredicate: {
       distance: 5,
-      delay: 150,
+      delay: 0,
     },
     dragSort: true,
     layout: {
@@ -255,8 +257,15 @@ watch(
 
 watch(
   () => widgetsStore.widgets.map(widget => widget.size).join('|'),
-  () => {
-    refreshLayout();
+  async () => {
+    await refreshLayout();
+  }
+);
+
+watch(
+  () => layoutStore.icons.map(icon => icon.size ?? '1x1').join('|'),
+  async () => {
+    await refreshLayout();
   }
 );
 
@@ -277,7 +286,7 @@ onUnmounted(() => {
       v-for="item in orderedItems"
       :key="`${item.type}-${item.id}`"
       class="grid-item"
-      :class="item.type === 'widget' ? `size-${item.widget.size}` : 'size-1x1'"
+      :class="`size-${item.type === 'widget' ? item.widget.size : (item.icon.size ?? '1x1')}`"
       :data-id="item.id"
       :data-type="item.type"
     >