refactor(repo-item): move drag-handle styles to global scope

Author: VChet

src/assets/global.scss

@@ -311,3 +311,9 @@ dialog {
 .capitalize {
   text-transform: capitalize;
 }
+.drag-handle {
+  cursor: grab;
+  &:hover {
+    color: var(--accent);
+  }
+}

src/components/repo-item.vue

@@ -24,7 +24,7 @@
         >
           <icon-trash />
         </button>
-        <icon-grip-vertical class="repo__header-actions-handler" />
+        <icon-grip-vertical class="drag-handle" />
       </div>
     </header>
     <ul class="repo__body">
@@ -214,12 +214,6 @@ const {
       .repo:focus-within & {
         display: flex;
       }
-      &-handler {
-        cursor: grab;
-        &:hover {
-          color: var(--accent);
-        }
-      }
     }
   }
   &__body {

src/pages/repositories.vue

@@ -59,7 +59,7 @@ const filteredItems = computed(() => {
 });
 
 const reposRef = useTemplateRef("reposElement");
-useSortable(reposRef, repositories, { handle: ".repo__header-actions-handler" });
+useSortable(reposRef, repositories, { handle: ".drag-handle" });
 
 type SortOption = "alphabetic" | "stars" | "forks" | "issues" | "update" | "language";
 function sort(option: SortOption): void {