feat(client): improve group pages tab

Author: gustavotoyota

apps/client/components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     Combobox: typeof import('./src/components/Combobox.vue')['default']
     CopyBtn: typeof import('./src/components/CopyBtn.vue')['default']
     CustomDialog: typeof import('./src/components/CustomDialog.vue')['default']
+    CustomInfiniteScroll: typeof import('./src/components/CustomInfiniteScroll.vue')['default']
     DeepBtn: typeof import('./src/components/DeepBtn.vue')['default']
     DeepBtnDropdown: typeof import('./src/components/DeepBtnDropdown.vue')['default']
     DisplayBtn: typeof import('./src/components/DisplayBtn.vue')['default']
@@ -27,6 +28,7 @@ declare module '@vue/runtime-core' {
     MiniSidebarBtn: typeof import('./src/components/MiniSidebarBtn.vue')['default']
     PageItem: typeof import('./src/components/PageItem.vue')['default']
     PageItemContent: typeof import('./src/components/PageItemContent.vue')['default']
+    PassthroughComponent: typeof import('./src/components/PassthroughComponent.vue')['default']
     PasswordField: typeof import('./src/components/PasswordField.vue')['default']
     QMenuHover: typeof import('./src/components/QMenuHover.vue')['default']
     Radio: typeof import('./src/components/Radio.vue')['default']

apps/client/src/components/CustomInfiniteScroll.vue

@@ -0,0 +1,14 @@
+<template>
+  <q-infinite-scroll>
+    <slot></slot>
+
+    <template v-slot:loading>
+      <div class="row justify-center q-my-md">
+        <q-circular-progress
+          indeterminate
+          size="md"
+        />
+      </div>
+    </template>
+  </q-infinite-scroll>
+</template>

apps/client/src/components/PassthroughComponent.vue

@@ -0,0 +1,18 @@
+<template>
+  <component
+    v-if="is != null"
+    :is="is"
+  >
+    <slot></slot>
+  </component>
+
+  <slot v-else></slot>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+defineProps<{
+  is?: string | Component;
+}>();
+</script>

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/GroupSettingsDialog/PagesTab/PagesTab.vue

@@ -21,42 +21,25 @@
 
   <div style="flex: 1; height: 0; display: flex">
     <div style="flex: 1">
-      <q-list
-        style="max-height: 100%; border-radius: 10px; background-color: #303030"
+      <Checklist
+        :item-ids="finalPageIds"
+        :items-wrapper="CustomInfiniteScroll"
+        :wrapper-events="{ load: onLoad }"
+        :wrapper-props="{ disable: !hasMorePages }"
+        :selected-item-ids="baseSelectedPageIds"
+        @select="(pageId) => baseSelectedPageIds.add(pageId)"
+        @unselect="(pageId) => baseSelectedPageIds.delete(pageId)"
+        style="max-height: 100%; border-radius: 10px; background-color: #383838"
         class="overflow-auto"
       >
-        <q-infinite-scroll
-          @load="onLoad"
-          :disable="!hasMorePages"
-        >
-          <q-item
-            v-for="groupPageId in finalPageIds"
-            :key="groupPageId"
-            class="text-grey-1"
-            style="background-color: #424242"
-            clickable
-            v-ripple
-            active-class="bg-grey-7"
-            :active="baseSelectedPageIds.has(groupPageId)"
-            @click="select(groupPageId, $event as MouseEvent)"
-          >
-            <q-item-section>
-              <q-item-label>
-                {{ getPageTitle(groupPageId, { prefer: 'absolute' }).text }}
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <template v-slot:loading>
-            <div class="row justify-center q-my-md">
-              <q-circular-progress
-                indeterminate
-                size="md"
-              />
-            </div>
-          </template>
-        </q-infinite-scroll>
-      </q-list>
+        <template #item="{ itemId: groupPageId }">
+          <q-item-section>
+            <q-item-label>
+              {{ getPageTitle(groupPageId, { prefer: 'absolute' }).text }}
+            </q-item-label>
+          </q-item-section>
+        </template>
+      </Checklist>
     </div>
 
     <Gap style="width: 16px" />
@@ -116,7 +99,8 @@ import { deletePage } from 'src/code/api-interface/pages/deletion/delete';
 import { movePage } from 'src/code/api-interface/pages/move';
 import { getPageTitle } from 'src/code/pages/utils';
 import type { RealtimeContext } from 'src/code/realtime/context';
-import { asyncDialog, handleError, isCtrlDown } from 'src/code/utils/misc';
+import { asyncDialog, handleError } from 'src/code/utils/misc';
+import CustomInfiniteScroll from 'src/components/CustomInfiniteScroll.vue';
 import type { Ref } from 'vue';
 
 import MovePageDialog from '../../MovePageDialog.vue';
@@ -154,18 +138,6 @@ function deselectAll() {
   }
 }
 
-function select(id: string, event: MouseEvent) {
-  if (!isCtrlDown(event)) {
-    baseSelectedPageIds.value.clear();
-  }
-
-  if (baseSelectedPageIds.value.has(id)) {
-    baseSelectedPageIds.value.delete(id);
-  } else {
-    baseSelectedPageIds.value.add(id);
-  }
-}
-
 async function onLoad(index: number, done: (stop?: boolean) => void) {
   try {
     const response = await trpcClient.groups.getPages.query({