feat: empty grid (#529)

components/ProfileView.vue

@@ -158,7 +158,9 @@ watch(
   [isConnected, gridsForDisplay, ownedCollectiblesCount],
   () => {
     // select best tab based for initial display
-    selectBestTab()
+    if (gridsForDisplay.value.length === 0) {
+      selectBestTab()
+    }
   },
   { immediate: true }
 )

domains/grid/components/GridView.vue

@@ -19,6 +19,7 @@ const {
   updateSelectedGrid,
   initSelectedGridId,
   getGridById,
+  gridsForTabs,
 } = useGrid()
 const gridContainer = ref<HTMLElement | null>(null)
 const { width } = useElementSize(gridContainer)
@@ -93,8 +94,15 @@ const handleResetGrid = async () => {
   const userGrid = await getUserGrid(address.value)
   const _grid = buildGrid(userGrid, isMobile.value, canEditGrid.value)
 
-  tempGrid.value = cloneObject(_grid)
-  viewedGrid.value = cloneObject(_grid)
+  // when user has no grids we re-create empty grids
+  if (gridsForTabs.value.length === 1) {
+    viewedGrid.value = cloneObject(EMPTY_GRID)
+    tempGrid.value = cloneObject(EMPTY_GRID)
+  } else {
+    tempGrid.value = cloneObject(_grid)
+    viewedGrid.value = cloneObject(_grid)
+  }
+
   gridWidgets.value = getSelectedGridWidgets(cloneObject(_grid))
   isSavingGrid.value = false
 
@@ -135,15 +143,15 @@ watch(
     const updatedViewedGrid = buildGrid(
       viewedGrid.value,
       isMobile.value,
-      canEditGrid.value
+      canEditGrid.value || gridsForTabs.value.length === 1
     )
 
     // if user is in edit mode we use temp grid, otherwise viewed grid
     if (canEditGrid.value) {
       const updatedTempGrid = buildGrid(
         tempGrid.value,
         isMobile.value,
-        canEditGrid.value
+        canEditGrid.value || gridsForTabs.value.length === 1
       )
       gridWidgets.value = getSelectedGridWidgets(updatedTempGrid)
       const changes = compareGrids(updatedViewedGrid, updatedTempGrid)

domains/grid/components/GridWidgetAddContent.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
 const { showModal } = useModal()
 const { formatMessage } = useIntl()
+const { isEditingGrid } = storeToRefs(useGridStore())
+const { gridsForTabs } = useGrid()
 
-const handleAddContent = () => {
-  showModal<Partial<GridWidget>>({
+const handleAddContent = async () => {
+  // we enable editing mode in case user has no grids yet but see add content placeholder
+  if (gridsForTabs.value.length === 1) {
+    isEditingGrid.value = true
+  }
+
+  await showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
   })
 }

domains/grid/composables/useGrid.ts

@@ -95,14 +95,7 @@ export const useGrid = () => {
         grid = buildGrid(userGrid, isMobile.value, withAddContentPlaceholder)
 
         if (grid.length === 0) {
-          grid = [
-            {
-              id: 'main',
-              title: 'Main',
-              grid: [],
-              gridColumns: GRID_COLUMNS_MIN,
-            },
-          ]
+          grid = cloneObject(EMPTY_GRID)
         }
 
         if (gridLog.enabled) {

domains/grid/shared/config.ts

@@ -64,3 +64,13 @@ export const DEFAULT_SMALL_COLUMN_NUMBER = 1
 // minimum and maximum number of columns in the grid
 export const GRID_COLUMNS_MIN = 2
 export const GRID_COLUMNS_MAX = 4
+
+// initial grid
+export const EMPTY_GRID = [
+  {
+    id: DEFAULT_GRID_TITLE.toLowerCase(),
+    title: DEFAULT_GRID_TITLE,
+    grid: [],
+    gridColumns: GRID_COLUMNS_MIN,
+  },
+]