fix: hover states, show selected network when changed in other catego…

…ries, partial sort

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

@@ -32,18 +32,15 @@
           { 'app-menu__link__block__drag__hovered': isHovered },
         ]"
       />
-      <p
-        v-if="showIsPinned"
+      <div
         :class="[
           'app-menu__link__block__pin',
-          {
-            'app-menu__link__block__pin__active': pinIconIsActive,
-          },
+          { 'app-menu__link__block__pin__visible': showIsPinned },
         ]"
         @click="setPinned"
       >
-        <pin-icon :is-pinned="isPinned" :is-active="pinIconIsActive" />
-      </p>
+        <pin-icon :is-pinned="props.isPinned" :is-active="pinIconIsActive" />
+      </div>
     </div>
   </a>
 </template>
@@ -86,6 +83,10 @@ const props = defineProps({
       return { networks: [], swap: [] };
     },
   },
+  index: {
+    type: Number,
+    required: true,
+  },
 });
 const imageTag = ref<HTMLImageElement | null>(null);
 
@@ -140,46 +141,47 @@ const getAverageRGB = (imgEl: HTMLImageElement) => {
 watch(
   () => props.isActive,
   () => {
-    if (props.isActive) getAverageRGB(imageTag.value!);
+    if (props.isActive) {
+      getAverageRGB(imageTag.value!);
+      getPosition();
+    }
+  },
+);
+/**
+ * Ensure hovered state is reset when item changes order
+ */
+watch(
+  () => props.index,
+  () => {
+    isHovered.value = false;
   },
 );
 /** ------------------------
  * Buttons
  * ------------------------*/
 const isHovered = ref(false);
 
-/**
- * Computed property to determine whether to show the "Pin" button.
- *
- * This property returns `true` if the network is Pinned,
- * otherwise it returns `false`.
- *
- * @returns {boolean} - `true` if the "Pin" button should be shown, `false` otherwise.
- */
-const isPinned = computed(() => {
-  return props.isPinned;
-});
-
 /**
  * Computed property to determine if the menu item should be shown as pinned.
  *
  * @returns {boolean} - Returns true if the menu item is active, or if it is either pinned or hovered.
  */
 const showIsPinned = computed(() => {
-  return props.isActive ? true : isPinned.value || isHovered.value;
+  return props.isActive ? true : props.isPinned || isHovered.value;
 });
 
 const pinIconIsActive = computed(() => {
   return props.isActive || isHovered.value;
 });
 
 const setPinned = async () => {
-  emit('update:pinNetwork', props.network.name, !isPinned.value);
+  emit('update:pinNetwork', props.network.name, !props.isPinned);
 };
 /** ------------------------
  * Scroll
 ------------------------*/
 const target = ref<HTMLElement | null>(null);
+
 /**
  * Reactive variable to determine the sticky state of the menu item.
  * It is set to `true` if the menu item is sticky at the top, `false` if it is sticky at the bottom, and `undefined` if it is not sticky.
@@ -275,10 +277,15 @@ watch(
         padding: 5px 8px 3px 8px;
         background: transparent;
         border-radius: 24px;
+        opacity: 0;
         transition: @opacity-noBG-transition;
-        &__active {
+        &:hover {
           background: @primaryLight;
         }
+        &__visible {
+          opacity: 100 !important;
+          transition: opacity 300ms ease-in;
+        }
       }
       &__drag {
         max-width: 32px;

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

@@ -1,28 +1,32 @@
 <template>
   <div>
-    <!-- Sort -->
-
     <!-- Scrollable Networks  -->
     <div :class="['networks-menu', { 'has-bg': isScrolling }]">
       <div v-if="!!networks" class="networks-menu__scroll-area" ref="scrollDiv">
-        <app-menu-sort :sortBy="sortBy" @update:sort="updateSort" />
+        <app-menu-sort
+          v-if="activeCategory === NetworksCategory.All"
+          :sortBy="sortBy"
+          @update:sort="updateSort"
+        />
 
         <draggable
           v-model="searchNetworks"
           item-key="name"
           :animation="500"
           draggable=":not(.do-not-drag)"
         >
-          <template #item="{ element }">
+          <template #item="{ element, index }">
             <app-menu-item
               v-bind="$attrs"
+              :key="element.name"
               :network="element"
               :is-active="!!selected && element.name === selected"
               :is-pinned="getIsPinned(element.name)"
               :scroll-position="y"
               :can-drag="getCanDrag(element)"
               :new-network-tags="newNetworksWithTags"
-              @click="setNetwork(element)"
+              :index="index"
+              @click.self="setNetwork(element)"
               @update:pin-network="updatePinNetwork"
               @update:gradient="emit('update:gradient', $event)"
               :class="{
@@ -94,6 +98,7 @@ const emit = defineEmits<{
   (e: 'update:pinNetwork', network: string, isPinned: boolean): void;
   (e: 'update:gradient', data: string): void;
 }>();
+
 const newNetworksWithTags = ref<{ networks: string[]; swap: string[] }>({
   networks: [],
   swap: [],
@@ -151,23 +156,32 @@ const updateSort = (sort: NetworkSort) => {
   sortBy.value = sort;
 };
 
-// const sortNetworks = (networks: BaseNetwork[], sortBy: NetworkSort) => {
-//   return networks.sort((a, b) => {
-//     if (sortBy.name === NetworkSortName.Name) {
-//       return sortBy.direction
-//         ? a.name.localeCompare(b.name)
-//         : b.name.localeCompare(a.name);
-//     }
-//     return 0;
-//   });
-// };
+const sortNetworks = (networks: BaseNetwork[], sortBy: NetworkSort) => {
+  return networks.sort((a, b) => {
+    if (sortBy.name === NetworkSortOption.Name) {
+      return sortBy.direction
+        ? a.name.localeCompare(b.name)
+        : b.name.localeCompare(a.name);
+    }
+    return 0;
+  });
+};
 
 /** ------------------
  * Displayed Networks
  ------------------*/
 const searchNetworks = computed({
   get() {
     if (!props.searchInput && props.searchInput === '') {
+      if (props.activeCategory === NetworksCategory.All) {
+        const pinned = props.networks.filter(net =>
+          props.pinnedNetworks.includes(net),
+        );
+        const other = props.networks.filter(
+          net => !props.pinnedNetworks.includes(net),
+        );
+        return [...pinned, ...sortNetworks(other, sortBy.value)];
+      }
       return props.networks;
     }
     const beginsWithName: BaseNetwork[] = [];