perf(Peers): Bring back sorting and filtering (#1694)

VueTorrent · May 20, 2024 · d6ed8dd · d6ed8dd
1 parent 5071058
commit d6ed8dd
Show file tree

Hide file tree

Showing 21 changed files with 291 additions and 227 deletions.
diff --git a/src/components/AddPanel.vue b/src/components/AddPanel.vue
@@ -11,7 +11,7 @@ function openAddTorrentDialog() {
 </script>
 
 <template>
-  <v-bottom-navigation :active="addTorrentStore.pendingTorrentsCount > 0" class="pointer" v-touch="{ up: openAddTorrentDialog }" @click="openAddTorrentDialog">
+  <v-bottom-navigation :active="addTorrentStore.pendingTorrentsCount > 0" class="cursor-pointer" v-touch="{ up: openAddTorrentDialog }" @click="openAddTorrentDialog">
     <v-list-item :title="$t('navbar.addPanel.torrentsPendingCount', addTorrentStore.pendingTorrentsCount)" />
     <v-spacer />
     <v-list-item>

diff --git a/src/components/Dashboard/DashboardItems/ItemChip.vue b/src/components/Dashboard/DashboardItems/ItemChip.vue
@@ -32,7 +32,7 @@ const useRandomColor = computed(() => enableHashColors.value && props.enableHash
     <div v-if="titleKey" class="text-caption text-grey">
       {{ $t(titleKey) }}
     </div>
-    <div class="d-flex flex-row gap">
+    <div class="d-flex flex-row flex-gap">
       <v-chip v-if="emptyValue" :color="color(torrent)" variant="flat" size="small">
         {{ $t(emptyValueKey) }}
       </v-chip>
@@ -42,9 +42,3 @@ const useRandomColor = computed(() => enableHashColors.value && props.enableHash
     </div>
   </div>
 </template>
-
-<style scoped>
-.gap {
-  gap: 8px;
-}
-</style>
diff --git a/src/components/Dashboard/Views/Grid/GridTorrent.vue b/src/components/Dashboard/Views/Grid/GridTorrent.vue
@@ -58,23 +58,17 @@ const isTorrentSelected = computed(() => dashboardStore.isTorrentInSelection(pro
 
 <template>
   <v-card
-    :class="`sideborder ${torrent.state} pointer`"
+    :class="`sideborder ${torrent.state} cursor-pointer`"
     height="100%"
     :color="isTorrentSelected ? `torrent-${torrent.state}-darken-3` : undefined"
     @click="$emit('onTorrentClick', $event, torrent)">
     <v-card-title class="text-wrap text-subtitle-1 pt-1 pb-0">{{ torrent.name }}</v-card-title>
     <v-card-text>
-      <div class="d-flex gap flex-wrap">
+      <div class="d-flex flex-gap flex-wrap">
         <template v-for="ppt in torrentProperties">
           <component v-if="ppt.props" :is="getComponent(ppt.type)" :torrent="torrent" v-bind="ppt.props" />
         </template>
       </div>
     </v-card-text>
   </v-card>
 </template>
-
-<style scoped>
-.gap {
-  gap: 8px 16px;
-}
-</style>
diff --git a/src/components/Dashboard/Views/List/ListTorrent.vue b/src/components/Dashboard/Views/List/ListTorrent.vue
@@ -56,23 +56,17 @@ const isTorrentSelected = computed(() => dashboardStore.isTorrentInSelection(pro
 
 <template>
   <v-card
-    :class="`sideborder ${torrent.state} pointer`"
+    :class="`sideborder ${torrent.state} cursor-pointer`"
     width="100%"
     :color="isTorrentSelected ? `torrent-${torrent.state}-darken-3` : undefined"
     @click="$emit('onTorrentClick', $event, torrent)">
     <v-card-title class="text-wrap pt-1 pb-0 px-2 text-truncate" style="font-size: 0.97em">{{ torrent.name }}</v-card-title>
     <v-card-text class="pa-2 pt-0">
-      <div class="d-flex gap flex-wrap">
+      <div class="d-flex flex-gap flex-wrap">
         <template v-for="ppt in torrentProperties">
           <component v-if="ppt.props" :is="getComponent(ppt.type)" :torrent="torrent" v-bind="ppt.props" />
         </template>
       </div>
     </v-card-text>
   </v-card>
 </template>
-
-<style scoped>
-.gap {
-  gap: 8px 16px;
-}
-</style>
diff --git a/src/components/Dashboard/Views/Table/DashboardItems/ItemChip.vue b/src/components/Dashboard/Views/Table/DashboardItems/ItemChip.vue
@@ -28,7 +28,7 @@ const useRandomColor = computed(() => enableHashColors.value && props.enableHash
 
 <template>
   <td>
-    <div class="d-flex flex-row gap" v-if="shouldShowChip">
+    <div class="d-flex flex-row flex-gap" v-if="shouldShowChip">
       <v-chip v-if="emptyValue" :color="color(torrent)" variant="flat" size="small">
         {{ $t(emptyValueKey) }}
       </v-chip>
@@ -38,9 +38,3 @@ const useRandomColor = computed(() => enableHashColors.value && props.enableHash
     </div>
   </td>
 </template>
-
-<style scoped>
-.gap {
-  gap: 8px;
-}
-</style>
diff --git a/src/components/Dashboard/Views/Table/TableView.vue b/src/components/Dashboard/Views/Table/TableView.vue
@@ -26,7 +26,7 @@ function isTorrentSelected(torrent: TorrentType) {
   return dashboardStore.isTorrentInSelection(torrent.hash)
 }
 
-const getTorrentRowColorClass = (torrent: TorrentType) => ['pointer', isTorrentSelected(torrent) ? `bg-torrent-${torrent.state}-darken-3 selected` : '']
+const getTorrentRowColorClass = (torrent: TorrentType) => ['cursor-pointer', isTorrentSelected(torrent) ? `bg-torrent-${torrent.state}-darken-3 selected` : '']
 </script>
 
 <template>

diff --git a/src/components/Dialogs/BulkRenameFilesDialog.vue b/src/components/Dialogs/BulkRenameFilesDialog.vue
@@ -305,7 +305,7 @@ onMounted(() => {
               <template v-slot:[`item.name`]="{ item }">
                 <span
                   class="fold-toggle"
-                  :class="{ pointer: item.type === 'folder' }"
+                  :class="{ 'cursor-pointer': item.type === 'folder' }"
                   :style="{ 'padding-left': `${item.indent * 16}px` }"
                   @click="item.type === 'folder' && toggleFolderFolded(item, !item.folded)">
                   <v-tooltip v-if="item.type === 'folder'" location="top" activator="parent">

diff --git a/src/components/Dialogs/ConfirmDeleteDialog.vue b/src/components/Dialogs/ConfirmDeleteDialog.vue
@@ -68,7 +68,7 @@ onUnmounted(() => {
       <v-card-title>{{ t('dialogs.delete.title', selection.length) }}</v-card-title>
       <v-card-text>
         <v-form v-model="isFormValid" ref="form" @submit.prevent>
-          <div class="d-flex flex-wrap gap">
+          <div class="d-flex flex-wrap flex-gap">
             <span class="pa-1 border wrap-anywhere" v-for="torrent in selection">{{ torrent.name }}</span>
           </div>
           <v-checkbox v-model="vuetorrentStore.deleteWithFiles" hide-details :label="$t('dialogs.delete.deleteWithFiles')" />
@@ -88,9 +88,3 @@ onUnmounted(() => {
     </v-card>
   </v-dialog>
 </template>
-
-<style scoped>
-.gap {
-  gap: 8px;
-}
-</style>
diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
@@ -66,7 +66,7 @@ const goHome = () => {
   <v-app-bar class="ios-padding">
     <v-app-bar-nav-icon @click="toggleDrawer" />
     <v-app-bar-title class="title">
-      <div class="title-wrapper pointer" @click="goHome">
+      <div class="title-wrapper cursor-pointer" @click="goHome">
         <span v-if="$vuetify.display.smAndUp" class="text-accent">Vue</span>
         <span v-if="$vuetify.display.smAndUp">Torrent</span>
       </div>

diff --git a/src/components/Navbar/SideWidgets/TransferStats.vue b/src/components/Navbar/SideWidgets/TransferStats.vue
@@ -20,17 +20,11 @@ const ratio = computed(() => (props.session ? undefined : maindataStore.serverSt
   <v-card variant="flat" color="primary">
     <v-card-title class="px-0 pb-0 text-uppercase white--text ml-1 font-weight-normal text-caption">{{ title }} </v-card-title>
     <v-card-text class="px-0 pb-0">
-      <div class="d-flex flex-column gap">
+      <div class="d-flex flex-column flex-gap">
         <DataCard :title="$t('navbar.side.stats.downloaded')" :value="download" color="download" icon="mdi-arrow-down" />
         <DataCard :title="$t('navbar.side.stats.uploaded')" :value="upload" color="upload" icon="mdi-arrow-up" />
         <StringCard v-if="!session" :title="$t('navbar.side.stats.ratio')" :value="ratio" color="ratio" />
       </div>
     </v-card-text>
   </v-card>
 </template>
-
-<style scoped>
-.gap {
-  gap: 8px;
-}
-</style>
diff --git a/src/components/Navbar/TopWidgets/ActiveFilters.vue b/src/components/Navbar/TopWidgets/ActiveFilters.vue
@@ -137,7 +137,7 @@ function resetTrackerFilter() {
       </v-slide-x-transition>
     </template>
 
-    <div class="d-flex flex-column gap mt-3">
+    <div class="d-flex flex-column flex-gap mt-3">
       <v-chip v-if="isTextFilterPresent" :color="textFilterColor" variant="elevated" closable @click:close="resetTextFilter()">
         <template v-slot:prepend>
           <v-icon class="mr-1" @click="toggleTextFilter()">{{ isTextFilterActive ? 'mdi-filter' : 'mdi-filter-off' }} </v-icon>
@@ -215,9 +215,3 @@ function resetTrackerFilter() {
     </div>
   </v-menu>
 </template>
-
-<style scoped>
-.gap {
-  gap: 8px;
-}
-</style>