feat(gui-v2): sort layout

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -6,6 +6,7 @@ import useViewSorts from '~/composables/useViewSorts'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiSortIcon from '~icons/mdi/sort'
 import MdiDeleteIcon from '~icons/mdi/close-box'
+import MdiAddIcon from '~icons/mdi/plus'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
@@ -26,8 +27,7 @@ watch(
 </script>
 
 <template>
-  <v-menu offset-y transition="slide-y-transition">
-    <template #activator="{ props }">
+  <a-dropdown offset-y class="" :trigger="['click']">
     <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
       <a-button
         v-t="['c:sort']"
@@ -49,8 +49,8 @@ watch(
         </div>
       </a-button>
     </v-badge>
-    </template>
-    <div class="backgroundColor pa-2 menu-filter-dropdown bg-background min-w-[400px]">
+    <template #overlay>
+      <div class="bg-white shadow p-2 menu-filter-dropdown min-w-[400px]">
         <div class="sort-grid" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">
             <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
@@ -66,10 +66,13 @@ watch(
               @click.stop
               @update:model-value="saveOrUpdate(sort, i)"
             />
-          <v-select
-            v-model="sort.direction"
+            <a-select
+              v-model:value="sort.direction"
               class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
-            :items="['asc', 'desc']"
+              :items="[
+                { text: 'asc', value: 'asc' },
+                { text: 'desc', value: 'desc' },
+              ]"
               :label="$t('labels.operation')"
               density="compact"
               variant="solo"
@@ -83,13 +86,16 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-      <v-btn small class="elevation-0 text-grey text-capitalize text-sm my-3" @click.stop="addSort">
-        <!-- todo:        <v-icon small color="grey"> mdi-plus </v-icon> -->
+        <a-button size="small" class="text-grey text-capitalize text-sm my-3" @click.stop="addSort">
+          <div class="flex gap-1 align-center">
+            <MdiAddIcon />
             <!-- Add Sort Option -->
             {{ $t('activity.addSort') }}
-      </v-btn>
           </div>
-  </v-menu>
+        </a-button>
+      </div>
+    </template>
+  </a-dropdown>
 </template>
 
 <style scoped>