refactor: move checkbox in table to the left side

Author: MatteoGabriele

app/components/Package/Table.vue

@@ -115,6 +115,9 @@ function getColumnLabel(id: ColumnId): string {
     <table class="w-full text-start">
       <thead class="border-b border-border">
         <tr>
+          <th scope="col" class="w-8">
+            <span class="sr-only">{{ getColumnLabel('selection') }}</span>
+          </th>
           <!-- Name (always visible) -->
           <th
             scope="col"
@@ -300,15 +303,15 @@ function getColumnLabel(id: ColumnId): string {
           >
             {{ getColumnLabel('security') }}
           </th>
-          <th scope="col" class="w-8">
-            <span class="sr-only">{{ getColumnLabel('selection') }}</span>
-          </th>
         </tr>
       </thead>
       <tbody>
         <!-- Loading skeleton rows -->
         <template v-if="isLoading && results.length === 0">
           <tr v-for="i in 5" :key="`skeleton-${i}`" class="border-b border-border">
+            <td class="py-3 px-3 w-8">
+              <div class="h-4 w-4 bg-bg-muted rounded animate-pulse ms-auto" />
+            </td>
             <td class="py-3 px-3">
               <div class="h-4 w-32 bg-bg-muted rounded animate-pulse" />
             </td>
@@ -330,9 +333,6 @@ function getColumnLabel(id: ColumnId): string {
             <td v-if="isColumnVisible('keywords')" class="py-3 px-3">
               <div class="h-4 w-32 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
-            <td class="py-3 px-3 w-8">
-              <div class="h-4 w-4 bg-bg-muted rounded animate-pulse ms-auto" />
-            </td>
           </tr>
         </template>
 

app/components/Package/TableRow.vue

@@ -52,6 +52,14 @@ const allMaintainersText = computed(() => {
     tabindex="0"
     :data-result-index="index"
   >
+    <td class="ps-3">
+      <PackageSelectionCheckbox
+        :package-name="result.package.name"
+        :disabled="isMaxSelected && !isSelected"
+        :checked="isSelected"
+        @change="togglePackageSelection"
+      />
+    </td>
     <!-- Name (always visible) -->
     <td class="py-2 px-3">
       <NuxtLink
@@ -200,15 +208,6 @@ const allMaintainersText = computed(() => {
       </span>
       <span v-else class="text-fg-subtle"> - </span>
     </td>
-
-    <td class="pe-2">
-      <PackageSelectionCheckbox
-        :package-name="result.package.name"
-        :disabled="isMaxSelected && !isSelected"
-        :checked="isSelected"
-        @change="togglePackageSelection"
-      />
-    </td>
   </tr>
 </template>