feat: new edit mode and mobile adjustments

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/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>"
 `;

domains/grid/components/GridFloatingMenu.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { tv } from 'tailwind-variants'
+
+type Emits = {
+  (event: 'on-reset'): void
+  (event: 'on-save'): void
+  (event: 'on-add-grid'): void
+}
+
+const emits = defineEmits<Emits>()
+const { isEditingGrid, hasUnsavedGrid, isSavingGrid } =
+  storeToRefs(useGridStore())
+const { isConnected, isMobile } = storeToRefs(useAppStore())
+const { formatMessage } = useIntl()
+const { showModal } = useModal()
+
+const handleToggleGridEditMode = async () => {
+  isEditingGrid.value = !isEditingGrid.value
+}
+
+const handleAddContent = () => {
+  showModal({
+    template: 'AddGridWidget',
+    data: {
+      type: undefined, // when no type we display selection screen
+      width: 1,
+      height: 1,
+    },
+  })
+}
+
+const handleAddGrid = () => {
+  showModal({
+    template: 'AddEditGrid',
+    data: {
+      id: undefined,
+      grid: undefined,
+      gridColumns: undefined,
+    },
+  })
+}
+
+const baseButtonVariants = tv({
+  base: 'flex size-10 items-center justify-center rounded-full transition-all duration-300',
+  variants: {
+    isDisabled: {
+      true: '',
+      false: 'cursor-pointer hover:scale-105',
+    },
+  },
+})
+
+const defaultButtonVariants = tv({
+  extend: baseButtonVariants,
+  base: 'bg-neutral-97',
+  variants: {
+    isDisabled: {
+      true: '',
+      false: 'hover:bg-neutral-95',
+    },
+  },
+})
+
+const resetButtonVariants = tv({
+  extend: baseButtonVariants,
+  variants: {
+    isDisabled: {
+      true: 'bg-neutral-97',
+      false: 'cursor-pointer bg-[#ffe0e0] hover:scale-105 hover:bg-[#ffd1d1]',
+    },
+  },
+})
+
+const saveButtonVariants = tv({
+  extend: baseButtonVariants,
+  variants: {
+    isDisabled: {
+      true: 'bg-neutral-97',
+      false: 'cursor-pointer bg-[#E2FFEA] hover:scale-105 hover:bg-[#d6ffe2]',
+    },
+  },
+})
+
+const styles = computed(() => {
+  return {
+    addWidgetButton: defaultButtonVariants(),
+    addGridButton: defaultButtonVariants(),
+    saveButton: saveButtonVariants({
+      isDisabled: !hasUnsavedGrid.value,
+    }),
+    resetButton: resetButtonVariants({
+      isDisabled: !hasUnsavedGrid.value,
+    }),
+    toggleButton: defaultButtonVariants(),
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="isConnected"
+    class="fixed bottom-4 right-4 z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition-height"
+    :class="{
+      'h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]': isEditingGrid,
+      'size-[64px]': !isEditingGrid,
+    }"
+  >
+    <div v-if="isEditingGrid" class="flex animate-fade-in gap-6 sm:flex-col">
+      <!-- Add widget  -->
+      <lukso-tooltip
+        :class="styles.addWidgetButton"
+        :text="!isMobile ? formatMessage('grid_add_widget') : ''"
+        placement="left"
+        :offset="15"
+        :show-delay="1000"
+        @click="handleAddContent"
+      >
+        <lukso-icon name="plus" color="purple-41"></lukso-icon>
+      </lukso-tooltip>
+
+      <!-- Add grid  -->
+      <lukso-tooltip
+        :class="styles.addGridButton"
+        :text="!isMobile ? formatMessage('grid_add_grid') : ''"
+        placement="left"
+        :offset="15"
+        :show-delay="1000"
+        @click="handleAddGrid"
+      >
+        <lukso-icon name="menu-1" color="purple-41"></lukso-icon>
+      </lukso-tooltip>
+
+      <!-- Save  -->
+      <lukso-tooltip
+        :class="styles.saveButton"
+        :text="
+          hasUnsavedGrid && !isMobile ? formatMessage('grid_can_save') : ''
+        "
+        placement="left"
+        :offset="15"
+        :show-delay="1000"
+        @click="hasUnsavedGrid && !isSavingGrid ? emits('on-save') : undefined"
+      >
+        <lukso-icon
+          :name="isSavingGrid ? 'spinner' : 'tick'"
+          :color="hasUnsavedGrid ? 'green-54' : 'neutral-85'"
+          :class="{
+            'animate-spin': isSavingGrid,
+          }"
+        ></lukso-icon>
+      </lukso-tooltip>
+
+      <!-- Reset  -->
+      <lukso-tooltip
+        :class="styles.resetButton"
+        :text="
+          hasUnsavedGrid && !isMobile ? formatMessage('grid_can_reset') : ''
+        "
+        placement="left"
+        :offset="15"
+        :show-delay="1000"
+        @click="hasUnsavedGrid ? emits('on-reset') : undefined"
+      >
+        <lukso-icon
+          name="reload"
+          :color="hasUnsavedGrid ? 'red-65' : 'neutral-85'"
+          class="-rotate-90 transition"
+        ></lukso-icon>
+      </lukso-tooltip>
+    </div>
+
+    <!-- Edit mode toggle -->
+    <lukso-tooltip
+      :class="styles.toggleButton"
+      :text="
+        !isMobile
+          ? isEditingGrid
+            ? formatMessage('grid_exit_edit_mode')
+            : formatMessage('grid_enable_edit_mode')
+          : ''
+      "
+      placement="left"
+      :offset="15"
+      :show-delay="1000"
+      @click="handleToggleGridEditMode"
+    >
+      <lukso-icon
+        :name="isEditingGrid ? 'close-lg' : 'edit'"
+        color="purple-41"
+      ></lukso-icon>
+    </lukso-tooltip>
+  </div>
+</template>

domains/grid/components/GridTabs.vue

@@ -6,25 +6,13 @@ type GridTab = {
 }
 
 const { selectedGridId, tempGrid, viewedGrid } = storeToRefs(useGridStore())
-const { formatMessage } = useIntl()
-const { showModal } = useModal()
+const { isMobile } = storeToRefs(useAppStore())
 const { canEditGrid, gridsForDisplay } = useGrid()
 const tabs = ref<GridTab[]>([])
 
 // we only show tabs when user has more then one
 const hasTabs = computed(() => tabs.value.length > 1)
 
-const handleAddGrid = () => {
-  showModal({
-    template: 'AddEditGrid',
-    data: {
-      id: undefined,
-      grid: undefined,
-      gridColumns: undefined,
-    },
-  })
-}
-
 const handleDragEnd = () => {
   tempGrid.value = cloneObject(tabs.value.map(tab => tab.grid))
 }
@@ -42,7 +30,7 @@ watch(
   <div class="flex select-none gap-x-6 gap-y-3 pb-4">
     <!-- Draggable Grid tabs -->
     <draggable
-      v-if="canEditGrid"
+      v-if="canEditGrid && !isMobile"
       v-model="tabs"
       tag="ul"
       :animation="300"
@@ -71,16 +59,5 @@ watch(
         :is-active="tab.grid.id === selectedGridId"
       />
     </ul>
-
-    <ul class="flex flex-wrap justify-start gap-x-6 gap-y-3">
-      <li
-        v-if="canEditGrid"
-        class="heading-inter-17-semi-bold flex cursor-pointer select-none items-center opacity-50 transition hover:opacity-100"
-        @click="handleAddGrid"
-      >
-        {{ formatMessage('grid_tabs_add_widget') }}
-        <lukso-icon name="plus" size="small" class="ml-2" />
-      </li>
-    </ul>
   </div>
 </template>

domains/grid/components/GridTabsItem.vue

@@ -12,6 +12,7 @@ const { formatMessage } = useIntl()
 const { canEditGrid, addGrid } = useGrid()
 const { showModal } = useModal()
 const { selectedGridId, tempGrid } = storeToRefs(useGridStore())
+const { isMobile } = storeToRefs(useAppStore())
 const dropdownId = `dropdown-${generateItemId()}`
 
 const styleVariants = tv({
@@ -89,7 +90,7 @@ const handleSelectTab = (id: string) => {
         {{ grid.title }}
       </div>
       <lukso-icon
-        v-if="canEditGrid"
+        v-if="canEditGrid && !isMobile"
         :id="dropdownId"
         class="absolute right-[-18px] mx-1 -mr-1 cursor-pointer p-1 opacity-0 transition hover:!opacity-100 group-hover:opacity-50"
         name="edit"