feat: new edit mode and mobile adjustments (#515)

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "linter": {
     "enabled": true,
     "rules": {
@@ -22,7 +22,7 @@
       "enabled": false,
       "semicolons": "asNeeded",
       "quoteStyle": "single",
-      "trailingComma": "all"
+      "trailingCommas": "all"
     }
   },
   "files": {

components/ModalTemplateAddEditGrid.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SelectStringOption } from '@lukso/web-components'
 
-const { modal, closeModal } = useModal()
+const { modal, closeModal } = useModal<Partial<Grid>>()
 const { formatMessage } = useIntl()
 const { tempGrid, selectedGridId } = storeToRefs(useGridStore())
 const { addGrid, updateGrid } = useGrid()
@@ -15,7 +15,7 @@ const inputErrors = reactive({
   title: '',
 })
 
-const id = computed(() => modal?.data?.grid?.id)
+const id = computed(() => modal?.data?.id)
 const canSubmit = ref(false)
 const isEdit = computed(() => !!id.value)
 

components/ModalTemplateAddGridWidget.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-const { modal } = useModal()
+const { modal } = useModal<Partial<GridWidget>>()
 </script>
 
 <template>
   <AddWidget
     :properties="modal?.data?.properties"
-    :id="modal?.data?.id"
-    :width="modal?.data?.width"
-    :height="modal?.data?.height"
+    :id="modal?.data?.i"
+    :width="modal?.data?.w"
+    :height="modal?.data?.h"
     :type="modal?.data?.type"
   />
 </template>

components/ProfileTabs.vue

@@ -9,20 +9,6 @@ type Emits = (event: 'activate-tab', value: ProfileViewTab) => void
 defineProps<Props>()
 const emits = defineEmits<Emits>()
 const { formatMessage } = useIntl()
-const { isConnected, isConnectedUserViewingOwnProfile } =
-  storeToRefs(useAppStore())
-const { isEditingGrid } = storeToRefs(useGridStore())
-const { connect } = useBaseProvider()
-
-const handleToggleGridEditMode = async () => {
-  if (!isConnected.value) {
-    await connect()
-    isEditingGrid.value = true
-    return
-  }
-
-  isEditingGrid.value = !isEditingGrid.value
-}
 </script>
 
 <template>
@@ -39,19 +25,5 @@ const handleToggleGridEditMode = async () => {
         @click="emits('activate-tab', tab)"
       />
     </ul>
-    <template v-if="activeTab === 'grid' && isConnectedUserViewingOwnProfile">
-      <lukso-tooltip
-        variant="white"
-        :text="isEditingGrid ? '' : formatMessage('grid_enable_edit_mode')"
-        :show-delay="1500"
-        placement="left"
-      >
-        <lukso-icon
-          :name="isEditingGrid && isConnected ? 'close-lg' : 'edit'"
-          @click="handleToggleGridEditMode"
-          class="cursor-pointer opacity-50 transition hover:opacity-100"
-        ></lukso-icon>
-      </lukso-tooltip>
-    </template>
   </div>
 </template>

components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap

@@ -9,7 +9,6 @@ exports[`ProfileTabs > renders active state 1`] = `
       </li>
       <li class="heading-inter-17-semi-bold flex items-center cursor-default">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px] bg-neutral-20 text-neutral-100">2</span></li>
     </ul>
-    <!--v-if-->
   </div>
 </div>"
 `;
@@ -23,7 +22,6 @@ exports[`ProfileTabs > renders default state 1`] = `
       </li>
       <li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Collectibles <span class="paragraph-inter-10-semi-bold ml-2 rounded-4 border border-neutral-20 px-1 py-[1px] bg-transparent text-neutral-20">2</span></li>
     </ul>
-    <!--v-if-->
   </div>
 </div>"
 `;

composables/useModal.ts

@@ -5,7 +5,7 @@ import type { Modal } from '@/types/modal'
  *
  * @param data
  */
-const showModal = async (modal: Modal) => {
+const showModal = async <T = ModalData>(modal: Modal<T>) => {
   const route = useRoute()
   const { isModalOpen } = storeToRefs(useAppStore())
 
@@ -49,12 +49,12 @@ const closeModal = async () => {
   })
 }
 
-export const useModal = () => {
+export const useModal = <T = ModalData>() => {
   const { modal } = useAppStore()
 
   return {
     showModal,
     closeModal,
-    modal,
+    modal: modal as Modal<T>,
   }
 }

domains/grid/components/AddWidget.vue

@@ -31,6 +31,7 @@ const loadComponent = (type?: string): Component | undefined => {
     )
   }
 
+  // when no type we display selection screen
   return defineAsyncComponent(() => import('./AddWidgetSelection.vue'))
 }
 

domains/grid/components/AddWidgetBasic.vue

@@ -62,12 +62,9 @@ const handleCancel = () => {
 }
 
 const handleBackToSelection = () => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
     forceOpen: true,
-    data: {
-      type: undefined, // when no type we display selection screen
-    },
   })
 }
 

domains/grid/components/AddWidgetSelection.vue

@@ -16,12 +16,12 @@ type Props = {
 defineProps<Props>()
 
 const handleSelectWidget = (widgetType: GridWidgetType) => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
     data: {
       type: widgetType,
-      width: 1,
-      height: 1,
+      w: 1,
+      h: 1,
     },
     forceOpen: true,
   })

domains/grid/components/AddWidgetText.vue

@@ -64,12 +64,9 @@ const handleCancel = () => {
 }
 
 const handleBackToSelection = () => {
-  showModal({
+  showModal<Partial<GridWidget>>({
     template: 'AddGridWidget',
     forceOpen: true,
-    data: {
-      type: undefined, // when no type we display selection screen
-    },
   })
 }
 </script>