feat: drag only pinned

packages/extension/src/ui/action/components/app-menu/components/app-menu-item.vue

@@ -40,7 +40,6 @@ import TestNetworkIcon from '@action/icons/common/test-network-icon.vue';
 import NewIcon from '@action/icons/asset/new-icon.vue';
 import PinIcon from '@action/icons/actions/pin.vue';
 import { newNetworks } from '@/providers/common/libs/new-features';
-import { BaseNetwork } from '@/types/base-network';
 
 const props = defineProps({
   network: {
@@ -55,9 +54,9 @@ const props = defineProps({
       return false;
     },
   },
-  pinnedNetworks: {
-    type: Array as PropType<BaseNetwork[]>,
-    default: () => [],
+  isPinned: {
+    type: Boolean,
+    required: true,
   },
 });
 const imageTag = ref<HTMLImageElement | null>(null);
@@ -130,9 +129,7 @@ const isHovered = ref(false);
  * @returns {boolean} - `true` if the "Pin" button should be shown, `false` otherwise.
  */
 const isPinned = computed(() => {
-  return props.pinnedNetworks.some(
-    pinnedNetwork => pinnedNetwork.name === props.network.name,
-  );
+  return props.isPinned;
 });
 
 /**
@@ -177,7 +174,8 @@ const setPinned = async () => {
     align-items: center;
     flex-direction: row;
     width: 96%;
-    height: 40px;
+    min-height: 40px !important;
+    max-height: 40px;
     margin-bottom: 3px;
     margin-top: 3px;
     cursor: pointer;

packages/extension/src/ui/action/components/app-menu/index.vue

@@ -6,19 +6,31 @@
       @scroll="setIsScrolling"
     >
       <!-- NOTE: WHATS seletced props is for, it is not in the component-->
-      <draggable v-model="searchNetworks" item-key="name" :animation="300">
+
+      <draggable v-model="draggableNetworks" item-key="name" :animation="500">
         <template #item="{ element }">
           <app-menu-item
             v-bind="$attrs"
             :network="element"
             :is-active="!!selected && element.name === selected"
             :selected="selected"
-            :pinnedNetworks="pinnedNetworks"
+            :is-pinned="getIsPinned(element.name)"
             @click="emit('update:network', element)"
             @update:pin-network="updatePinNetwork"
           />
         </template>
       </draggable>
+      <app-menu-item
+        v-for="element in otherNetworks"
+        :key="element.name"
+        v-bind="$attrs"
+        :network="element"
+        :is-active="!!selected && element.name === selected"
+        :selected="selected"
+        :is-pinned="getIsPinned(element.name)"
+        @click="emit('update:network', element)"
+        @update:pin-network="updatePinNetwork"
+      />
     </div>
   </div>
 </template>
@@ -29,7 +41,7 @@ import AppMenuItem from './components/app-menu-item.vue';
 import draggable from 'vuedraggable';
 import NetworksState from '@/libs/networks-state';
 import { BaseNetwork } from '@/types/base-network';
-
+import { NetworkNames } from '@enkryptcom/types';
 const networksState = new NetworksState();
 const props = defineProps({
   networks: {
@@ -59,6 +71,9 @@ const emit = defineEmits<{
   (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
 }>();
 
+const getIsPinned = (network: NetworkNames) => {
+  return props.pinnedNetworks.map(pinned => pinned.name).includes(network);
+};
 const searchNetworks = computed({
   get: () => {
     return props.networks.filter(
@@ -79,6 +94,16 @@ const searchNetworks = computed({
   },
 });
 
+const draggableNetworks = computed(() => {
+  return searchNetworks.value.filter(network => {
+    return getIsPinned(network.name);
+  });
+});
+
+const otherNetworks = computed(() => {
+  return searchNetworks.value.filter(network => !getIsPinned(network.name));
+});
+
 const updatePinNetwork = (network: string, isPinned: boolean) => {
   emit('update:pinNetwork', network, isPinned);
 };
@@ -125,7 +150,6 @@ onBeforeUnmount(() => {
     max-height: 452px;
     display: flex;
     flex-direction: column;
-    gap: 4px;
     overflow-y: scroll;
     scroll-behavior: smooth;
     margin-right: -4px;