rewrite friendlog table

src/components/ui/table/Table.vue

@@ -7,7 +7,7 @@
 </script>
 
 <template>
-    <div data-slot="table-container" class="relative w-full overflow-auto">
+    <div data-slot="table-container" class="relative w-full">
         <table data-slot="table" :class="cn('w-full caption-bottom text-[13px]', props.class)">
             <slot />
         </table>

src/views/FriendLog/FriendLog.vue

@@ -1,116 +1,114 @@
 <template>
     <div class="x-container" ref="friendLogRef">
-        <div style="margin: 0 0 10px; display: flex; align-items: center">
+        <DataTableLayout
-            <el-select
+            :table="table"
-                v-model="friendLogTable.filters[0].value"
+            :table-style="tableHeightStyle"
-                multiple
+            :page-sizes="pageSizes"
-                clearable
+            :total-items="totalItems"
-                style="flex: 1"
+            :on-page-size-change="handlePageSizeChange">
-                :placeholder="t('view.friend_log.filter_placeholder')"
+            <template #toolbar>
-                @change="saveTableFilters">
+                <div style="margin: 0 0 10px; display: flex; align-items: center">
-                <el-option
+                    <el-select
-                    v-for="type in [
+                        v-model="friendLogTable.filters[0].value"
-                        'Friend',
+                        multiple
-                        'Unfriend',
+                        clearable
-                        'FriendRequest',
+                        style="flex: 1"
-                        'CancelFriendRequest',
+                        :placeholder="t('view.friend_log.filter_placeholder')"
-                        'DisplayName',
+                        @change="saveTableFilters">
-                        'TrustLevel'
+                        <el-option
-                    ]"
+                            v-for="type in [
-                    :key="type"
+                                'Friend',
-                    :label="t('view.friend_log.filters.' + type)"
+                                'Unfriend',
-                    :value="type" />
+                                'FriendRequest',
-            </el-select>
+                                'CancelFriendRequest',
-            <el-input
+                                'DisplayName',
-                v-model="friendLogTable.filters[1].value"
+                                'TrustLevel'
-                :placeholder="t('view.friend_log.search_placeholder')"
+                            ]"
-                style="flex: 0.4; margin-left: 10px" />
+                            :key="type"
-        </div>
+                            :label="t('view.friend_log.filters.' + type)"
-
+                            :value="type" />
-        <DataTable v-bind="friendLogTable" :data="friendLogDisplayData">
+                    </el-select>
-            <el-table-column width="20"></el-table-column>
+                    <el-input
-            <el-table-column :label="t('table.friendLog.date')" prop="created_at" width="200">
+                        v-model="friendLogTable.filters[1].value"
-                <template #default="scope">
+                        :placeholder="t('view.friend_log.search_placeholder')"
-                    <el-tooltip placement="right">
+                        style="flex: 0.4; margin-left: 10px" />
-                        <template #content>
+                </div>
-                            <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
+            </template>
-                        </template>
+        </DataTableLayout>
-                        <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                    </el-tooltip>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.friendLog.type')" prop="type" width="200">
-                <template #default="scope">
-                    <el-tag type="info" effect="plain" size="small"
-                        ><span v-text="t('view.friend_log.filters.' + scope.row.type)"></span
-                    ></el-tag>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.friendLog.user')" prop="displayName">
-                <template #default="scope">
-                    <span v-if="scope.row.type === 'DisplayName'">{{ scope.row.previousDisplayName }} → </span>
-                    <span
-                        class="x-link table-user"
-                        style="padding-right: 10px"
-                        @click="showUserDialog(scope.row.userId)"
-                        >{{ scope.row.displayName || scope.row.userId }}
-                    </span>
-                    <template v-if="scope.row.type === 'TrustLevel'">
-                        <span>({{ scope.row.previousTrustLevel }} → {{ scope.row.trustLevel }})</span>
-                    </template>
-                </template>
-            </el-table-column>
-
-            <el-table-column :label="t('table.friendLog.action')" width="80" align="right">
-                <template #default="scope">
-                    <el-button
-                        v-if="shiftHeld"
-                        style="color: var(--el-color-danger)"
-                        text
-                        :icon="Close"
-                        size="small"
-                        class="button-pd-0"
-                        @click="deleteFriendLog(scope.row)"></el-button>
-                    <i
-                        v-else
-                        class="ri-delete-bin-line"
-                        style="opacity: 0.85"
-                        @click="deleteFriendLogPrompt(scope.row)"></i>
-                </template>
-            </el-table-column>
-            <el-table-column width="5"></el-table-column>
-        </DataTable>
     </div>
 </template>
 
 <script setup>
-    import { computed, watch } from 'vue';
+    import {
-    import { Close } from '@element-plus/icons-vue';
+        getCoreRowModel,
+        getFilteredRowModel,
+        getPaginationRowModel,
+        getSortedRowModel,
+        useVueTable
+    } from '@tanstack/vue-table';
+    import { computed, ref, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import dayjs from 'dayjs';
 
-    import { useAppearanceSettingsStore, useFriendStore, useUiStore, useUserStore } from '../../stores';
+    import { useAppearanceSettingsStore, useFriendStore, useVrcxStore } from '../../stores';
-    import { formatDateFilter, removeFromArray } from '../../shared/utils';
+    import { DataTableLayout } from '../../components/ui/data-table';
+    import { createColumns } from './columns.jsx';
     import { database } from '../../service/database';
-    import { useTableHeight } from '../../composables/useTableHeight';
+    import { removeFromArray } from '../../shared/utils';
+    import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
+    import { valueUpdater } from '../../components/ui/table/utils';
 
     import configRepository from '../../service/config';
 
-    const { hideUnfriends } = storeToRefs(useAppearanceSettingsStore());
+    const appearanceSettingsStore = useAppearanceSettingsStore();
-    const { showUserDialog } = useUserStore();
+    const vrcxStore = useVrcxStore();
+    const { hideUnfriends } = storeToRefs(appearanceSettingsStore);
     const { friendLogTable } = storeToRefs(useFriendStore());
-    const { shiftHeld } = storeToRefs(useUiStore());
 
-    const { containerRef: friendLogRef } = useTableHeight(friendLogTable);
+    const friendLogRef = ref(null);
+    const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(friendLogRef, {
+        offset: 30,
+        toolbarHeight: 54,
+        paginationHeight: 52
+    });
 
     const friendLogDisplayData = computed(() => {
         const data = friendLogTable.value.data;
-        return data.slice().sort((a, b) => {
+        const typeFilter = friendLogTable.value.filters?.[0]?.value ?? [];
+        const searchFilter = friendLogTable.value.filters?.[1]?.value ?? '';
+        const hideUnfriendsFilter = friendLogTable.value.filters?.[2]?.value;
+        const typeSet = Array.isArray(typeFilter)
+            ? new Set(typeFilter.map((value) => String(value).toLowerCase()))
+            : null;
+        const searchValue = String(searchFilter).trim().toLowerCase();
+
+        const filtered = data.filter((row) => {
+            if (hideUnfriendsFilter && row.type === 'Unfriend') {
+                return false;
+            }
+            if (typeSet && typeSet.size > 0) {
+                const rowType = String(row.type ?? '').toLowerCase();
+                if (!typeSet.has(rowType)) {
+                    return false;
+                }
+            }
+            if (searchValue) {
+                const displayName = row.displayName;
+                if (
+                    displayName === undefined ||
+                    displayName === null ||
+                    !String(displayName).toLowerCase().includes(searchValue)
+                ) {
+                    return false;
+                }
+            }
+            return true;
+        });
+
+        return filtered.slice().sort((a, b) => {
             const aTime = typeof a?.created_at === 'string' ? a.created_at : '';
             const bTime = typeof b?.created_at === 'string' ? b.created_at : '';
             const aTs = dayjs(aTime).valueOf();
@@ -154,12 +152,71 @@
         removeFromArray(friendLogTable.value.data, row);
         database.deleteFriendLogHistory(row.rowId);
     }
+
+    const columns = createColumns({
+        onDelete: deleteFriendLog,
+        onDeletePrompt: deleteFriendLogPrompt
+    });
+
+    const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
+    const pageSize = computed(() =>
+        friendLogTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : friendLogTable.value.pageSize
+    );
+
+    const sorting = ref([]);
+    const pagination = ref({
+        pageIndex: 0,
+        pageSize: pageSize.value
+    });
+
+    const table = useVueTable({
+        data: friendLogDisplayData,
+        columns,
+        getRowId: (row) => `${row.type}:${row.rowId ?? row.userId ?? row.created_at ?? ''}`,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
+        onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
+        state: {
+            get sorting() {
+                return sorting.value;
+            },
+            get pagination() {
+                return pagination.value;
+            }
+        }
+    });
+
+    const totalItems = computed(() => {
+        const length = table.getFilteredRowModel().rows.length;
+        const max = vrcxStore.maxTableSize;
+        return length > max && length < max + 51 ? max : length;
+    });
+
+    const handlePageSizeChange = (size) => {
+        if (friendLogTable.value.pageSizeLinked) {
+            appearanceSettingsStore.setTablePageSize(size);
+        } else {
+            friendLogTable.value.pageSize = size;
+        }
+    };
+
+    watch(pageSize, (size) => {
+        if (pagination.value.pageSize === size) {
+            return;
+        }
+        pagination.value = {
+            ...pagination.value,
+            pageIndex: 0,
+            pageSize: size
+        };
+        table.setPageSize(size);
+    });
 </script>
 
 <style scoped>
-    .button-pd-0 {
-        padding: 0 !important;
-    }
     .table-user {
         color: var(--x-table-user-text-color);
     }

src/views/FriendLog/columns.jsx

@@ -0,0 +1,161 @@
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from '../../components/ui/tooltip';
+import { ArrowRight, ArrowUpDown, X } from 'lucide-vue-next';
+import { storeToRefs } from 'pinia';
+
+import { formatDateFilter } from '../../shared/utils';
+import { i18n } from '../../plugin';
+import { useUiStore, useUserStore } from '../../stores';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onDelete, onDeletePrompt }) => {
+    const { showUserDialog } = useUserStore();
+    const { shiftHeld } = storeToRefs(useUiStore());
+
+    return [
+        {
+            id: 'spacer',
+            header: () => null,
+            enableSorting: false,
+            meta: {
+                class: 'w-[20px]'
+            },
+            cell: () => null
+        },
+        {
+            accessorKey: 'created_at',
+            meta: {
+                class: 'w-[200px]'
+            },
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === 'asc')
+                    }
+                >
+                    {t('table.friendLog.date')}
+                    <ArrowUpDown class="ml-1 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => {
+                const createdAt = row.getValue('created_at');
+                const shortText = formatDateFilter(createdAt, 'short');
+                const longText = formatDateFilter(createdAt, 'long');
+
+                return (
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <span>{shortText}</span>
+                            </TooltipTrigger>
+                            <TooltipContent side="right">
+                                <span>{longText}</span>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                );
+            }
+        },
+        {
+            accessorKey: 'type',
+            meta: {
+                class: 'w-[200px]'
+            },
+            header: () => t('table.friendLog.type'),
+            cell: ({ row }) => {
+                const type = row.getValue('type');
+                return (
+                    <Badge variant="outline" class="text-muted-foreground">
+                        {t(`view.friend_log.filters.${type}`)}
+                    </Badge>
+                );
+            }
+        },
+        {
+            accessorKey: 'displayName',
+            header: () => t('table.friendLog.user'),
+            cell: ({ row }) => {
+                const original = row.original;
+                const displayName =
+                    original.displayName || original.userId || '';
+                return (
+                    <span>
+                        {original.type === 'DisplayName' ? (
+                            <span class="mr-1 text-muted-foreground">
+                                {original.previousDisplayName}
+                                <ArrowRight class="mx-1 inline h-3 w-3" />
+                            </span>
+                        ) : null}
+                        <span
+                            class="x-link table-user pr-2.5"
+                            onClick={() => showUserDialog(original.userId)}
+                        >
+                            {displayName}
+                        </span>
+                        {original.type === 'TrustLevel' ? (
+                            <span class="text-muted-foreground">
+                                ({original.previousTrustLevel}
+                                <ArrowRight class="mx-1 inline h-3 w-3" />
+                                {original.trustLevel})
+                            </span>
+                        ) : null}
+                    </span>
+                );
+            }
+        },
+        {
+            id: 'action',
+            meta: {
+                class: 'w-[80px] max-w-[80px] text-right'
+            },
+            header: () => t('table.friendLog.action'),
+            enableSorting: false,
+            cell: ({ row }) => {
+                const original = row.original;
+                if (shiftHeld.value) {
+                    return (
+                        <div class="flex justify-end">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="h-6 text-destructive"
+                                onClick={() => onDelete(original)}
+                            >
+                                <X />
+                            </Button>
+                        </div>
+                    );
+                }
+
+                return (
+                    <div class="flex justify-end">
+                        <button
+                            type="button"
+                            class="inline-flex h-6 items-center justify-center text-muted-foreground hover:text-foreground"
+                            onClick={() => onDeletePrompt(original)}
+                        >
+                            <i class="ri-delete-bin-line" />
+                        </button>
+                    </div>
+                );
+            }
+        },
+        {
+            id: 'trailing',
+            header: () => null,
+            enableSorting: false,
+            meta: {
+                class: 'w-[5px]'
+            },
+            cell: () => null
+        }
+    ];
+};