From 6e4938482e24c9a79a34b14f0a0e980b3f17dab9 Mon Sep 17 00:00:00 2001
From: Meierschlumpf <meierschlumpf@gmail.com>
Date: Sat, 7 Jan 2023 09:23:10 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20issue=20with=20shape?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/configs/default.json                     | 448 ++++++++++--------
 .../Overview/AvailableElementsOverview.tsx    |  34 +-
 2 files changed, 281 insertions(+), 201 deletions(-)

diff --git a/data/configs/default.json b/data/configs/default.json
index 64b74e89c..bce515c88 100644
--- a/data/configs/default.json
+++ b/data/configs/default.json
@@ -18,70 +18,12 @@
   ],
   "apps": [
     {
-      "id": "5df743d9-5cb1-457c-85d2-64ff86855652",
-      "name": "Your app",
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
+      "name": "Documentation",
       "url": "https://homarr.dev",
-      "appearance": {
-        "iconUrl": "/imgs/logo/logo.png"
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": []
-      },
       "behaviour": {
-        "isOpeningNewTab": true,
-        "externalUrl": "https://homarr.dev"
-      },
-      "area": {
-        "type": "category",
-        "properties": {
-          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
-        }
-      },
-      "shape": {
-        "md": {
-          "location": {
-            "x": 5,
-            "y": 1
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "sm": {
-          "location": {
-            "x": 2,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "lg": {
-          "location": {
-            "x": 1,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        }
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      }
-    },
-    {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330",
-      "name": "Contribute",
-      "url": "https://github.com/ajnart/homarr",
-      "behaviour": {
-        "onClickUrl": "https://github.com/ajnart/homarr",
-        "externalUrl": "https://github.com/ajnart/homarr",
+        "onClickUrl": "https://homarr.dev",
+        "externalUrl": "https://homarr.dev",
         "isOpeningNewTab": true
       },
       "network": {
@@ -91,7 +33,7 @@
         ]
       },
       "appearance": {
-        "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/github.png"
+        "iconUrl": "/imgs/logo/logo.png"
       },
       "integration": {
         "type": null,
@@ -106,27 +48,27 @@
       "shape": {
         "md": {
           "location": {
-            "x": 5,
-            "y": 3
+            "x": 0,
+            "y": 10
           },
           "size": {
-            "width": 1,
+            "width": 2,
             "height": 1
           }
         },
         "sm": {
           "location": {
             "x": 0,
-            "y": 2
+            "y": 10
           },
           "size": {
-            "width": 1,
+            "width": 2,
             "height": 1
           }
         },
         "lg": {
           "location": {
-            "x": 2,
+            "x": 3,
             "y": 1
           },
           "size": {
@@ -194,6 +136,64 @@
         "properties": []
       }
     },
+    {
+      "id": "5df743d9-5cb1-457c-85d2-64ff86855652",
+      "name": "Your app",
+      "url": "https://homarr.dev",
+      "appearance": {
+        "iconUrl": "/imgs/logo/logo.png"
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": []
+      },
+      "behaviour": {
+        "isOpeningNewTab": true,
+        "externalUrl": "https://homarr.dev"
+      },
+      "area": {
+        "type": "category",
+        "properties": {
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
+        }
+      },
+      "shape": {
+        "md": {
+          "location": {
+            "x": 2,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "sm": {
+          "location": {
+            "x": 2,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 1,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        }
+      },
+      "integration": {
+        "type": null,
+        "properties": []
+      }
+    },
     {
       "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990",
       "name": "Donate",
@@ -255,64 +255,6 @@
         }
       }
     },
-    {
-      "id": "e41a11f5-9c6e-41bc-ac0e-4c4c47582faa",
-      "name": "Your app",
-      "url": "https://homarr.dev",
-      "appearance": {
-        "iconUrl": "/imgs/logo/logo.png"
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": []
-      },
-      "behaviour": {
-        "isOpeningNewTab": true,
-        "externalUrl": ""
-      },
-      "area": {
-        "type": "wrapper",
-        "properties": {
-          "id": "default"
-        }
-      },
-      "shape": {
-        "md": {
-          "location": {
-            "x": 0,
-            "y": 6
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "sm": {
-          "location": {
-            "x": 0,
-            "y": 6
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "lg": {
-          "location": {
-            "x": 0,
-            "y": 6
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        }
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      }
-    },
     {
       "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a337",
       "name": "Discord",
@@ -345,11 +287,11 @@
         "md": {
           "location": {
             "x": 0,
-            "y": 0
+            "y": 1
           },
           "size": {
             "width": 1,
-            "height": 3
+            "height": 1
           }
         },
         "sm": {
@@ -375,12 +317,70 @@
       }
     },
     {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
-      "name": "Documentation",
+      "id": "615e43bd-f0aa-4117-ba49-b6495c039f3e",
+      "name": "Your app",
       "url": "https://homarr.dev",
+      "appearance": {
+        "iconUrl": "/imgs/logo/logo.png"
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": []
+      },
       "behaviour": {
-        "onClickUrl": "https://homarr.dev",
-        "externalUrl": "https://homarr.dev",
+        "isOpeningNewTab": true,
+        "externalUrl": "https://homarr.dev"
+      },
+      "area": {
+        "type": "wrapper",
+        "properties": {
+          "id": "default"
+        }
+      },
+      "shape": {
+        "sm": {
+          "location": {
+            "x": 0,
+            "y": 5
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "md": {
+          "location": {
+            "x": 0,
+            "y": 5
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 0,
+            "y": 5
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        }
+      },
+      "integration": {
+        "type": null,
+        "properties": []
+      }
+    },
+    {
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330",
+      "name": "Contribute",
+      "url": "https://github.com/ajnart/homarr",
+      "behaviour": {
+        "onClickUrl": "https://github.com/ajnart/homarr",
+        "externalUrl": "https://github.com/ajnart/homarr",
         "isOpeningNewTab": true
       },
       "network": {
@@ -390,7 +390,7 @@
         ]
       },
       "appearance": {
-        "iconUrl": "/imgs/logo/logo.png"
+        "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/github.png"
       },
       "integration": {
         "type": null,
@@ -402,6 +402,60 @@
           "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
         }
       },
+      "shape": {
+        "md": {
+          "location": {
+            "x": 2,
+            "y": 3
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "sm": {
+          "location": {
+            "x": 1,
+            "y": 1
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 2,
+            "y": 3
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        }
+      }
+    },
+    {
+      "id": "e41a11f5-9c6e-41bc-ac0e-4c4c47582faa",
+      "name": "Haha",
+      "url": "https://homarr.dev",
+      "appearance": {
+        "iconUrl": "/imgs/logo/logo.png"
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": []
+      },
+      "behaviour": {
+        "isOpeningNewTab": true,
+        "externalUrl": ""
+      },
+      "area": {
+        "type": "category",
+        "properties": {
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
+        }
+      },
       "shape": {
         "md": {
           "location": {
@@ -415,72 +469,32 @@
         },
         "sm": {
           "location": {
-            "x": 0,
-            "y": 10
+            "x": 2,
+            "y": 2
           },
           "size": {
-            "width": 2,
+            "width": 1,
             "height": 1
           }
         },
         "lg": {
           "location": {
-            "x": 3,
-            "y": 1
+            "x": 0,
+            "y": 6
           },
           "size": {
             "width": 1,
             "height": 1
           }
         }
+      },
+      "integration": {
+        "type": null,
+        "properties": []
       }
     }
   ],
   "widgets": [
-    {
-      "id": "calendar",
-      "properties": {
-        "sundayStart": false
-      },
-      "area": {
-        "type": "wrapper",
-        "properties": {
-          "id": "default"
-        }
-      },
-      "shape": {
-        "md": {
-          "location": {
-            "x": 0,
-            "y": 1
-          },
-          "size": {
-            "width": 3,
-            "height": 5
-          }
-        },
-        "sm": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 3,
-            "height": 5
-          }
-        },
-        "lg": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 3,
-            "height": 5
-          }
-        }
-      }
-    },
     {
       "id": "weather",
       "properties": {
@@ -496,11 +510,11 @@
       "shape": {
         "md": {
           "location": {
-            "x": 4,
+            "x": 0,
             "y": 0
           },
           "size": {
-            "width": 2,
+            "width": 3,
             "height": 1
           }
         },
@@ -510,22 +524,66 @@
             "y": 0
           },
           "size": {
-            "width": 2,
+            "width": 3,
             "height": 1
           }
         },
         "lg": {
           "location": {
             "x": 0,
-            "y": 1
+            "y": 0
           },
           "size": {
-            "width": 2,
+            "width": 3,
             "height": 1
           }
         }
       }
     },
+    {
+      "id": "calendar",
+      "properties": {
+        "sundayStart": false
+      },
+      "area": {
+        "type": "wrapper",
+        "properties": {
+          "id": "default"
+        }
+      },
+      "shape": {
+        "md": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 3,
+            "height": 5
+          }
+        },
+        "sm": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 3,
+            "height": 5
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 3,
+            "height": 5
+          }
+        }
+      }
+    },
     {
       "id": "date",
       "properties": {
@@ -540,18 +598,18 @@
       "shape": {
         "sm": {
           "location": {
-            "x": 1,
-            "y": 1
+            "x": 0,
+            "y": 2
           },
           "size": {
             "width": 2,
-            "height": 2
+            "height": 1
           }
         },
         "md": {
           "location": {
-            "x": 4,
-            "y": 2
+            "x": 1,
+            "y": 1
           },
           "size": {
             "width": 2,
@@ -560,8 +618,8 @@
         },
         "lg": {
           "location": {
-            "x": 2,
-            "y": 0
+            "x": 1,
+            "y": 1
           },
           "size": {
             "width": 2,
diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
index 5c45e4f03..b77669b49 100644
--- a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
@@ -112,13 +112,35 @@ export const AvailableElementTypes = ({
                     },
                   },
                   shape: {
-                    location: {
-                      x: 0,
-                      y: 0,
+                    sm: {
+                      location: {
+                        x: 0,
+                        y: 0,
+                      },
+                      size: {
+                        width: appTileDefinition.minWidth,
+                        height: appTileDefinition.minHeight,
+                      },
                     },
-                    size: {
-                      width: appTileDefinition.minWidth,
-                      height: appTileDefinition.minHeight,
+                    md: {
+                      location: {
+                        x: 0,
+                        y: 0,
+                      },
+                      size: {
+                        width: appTileDefinition.minWidth,
+                        height: appTileDefinition.minHeight,
+                      },
+                    },
+                    lg: {
+                      location: {
+                        x: 0,
+                        y: 0,
+                      },
+                      size: {
+                        width: appTileDefinition.minWidth,
+                        height: appTileDefinition.minHeight,
+                      },
                     },
                   },
                   integration: {