From b570de6d4a85bba2d73fb00661a93547ffe75cb2 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Thu, 5 Mar 2026 20:37:05 +0900
Subject: [PATCH] fead: group member moderation ban export/import dialog
 (#1675)

---
 src/components/DeprecationAlert.vue           |   2 +-
 .../GroupMemberModerationBanExportDialog.vue  | 127 +++
 .../GroupMemberModerationBanImportDialog.vue  | 221 +++++
 .../GroupMemberModerationDialog.vue           | 890 +++++++-----------
 .../__tests__/groupModerationUtils.test.js    |  62 ++
 .../GroupDialog/groupModerationUtils.js       |  32 +
 .../GroupDialog/useGroupBatchOperations.js    | 321 +++++++
 .../useGroupModerationSelection.js            | 123 +++
 src/components/ui/alert/index.js              |   2 +-
 src/localization/en.json                      |   9 +-
 src/shared/utils/__tests__/gallery.test.js    |  44 +
 src/shared/utils/base/__tests__/array.test.js |  94 +-
 12 files changed, 1353 insertions(+), 574 deletions(-)
 create mode 100644 src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue
 create mode 100644 src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
 create mode 100644 src/components/dialogs/GroupDialog/__tests__/groupModerationUtils.test.js
 create mode 100644 src/components/dialogs/GroupDialog/groupModerationUtils.js
 create mode 100644 src/components/dialogs/GroupDialog/useGroupBatchOperations.js
 create mode 100644 src/components/dialogs/GroupDialog/useGroupModerationSelection.js

diff --git a/src/components/DeprecationAlert.vue b/src/components/DeprecationAlert.vue
index e45dbaa1..450e7498 100644
--- a/src/components/DeprecationAlert.vue
+++ b/src/components/DeprecationAlert.vue
@@ -1,6 +1,6 @@
 <template>
     <Alert variant="warning" class="mb-4">
-        <MessageSquareWarning class="text-lg" />
+        <MessageSquareWarning />
         <AlertTitle>{{ t('common.feature_relocated.title') }}</AlertTitle>
         <AlertDescription>
             <i18n-t keypath="common.feature_relocated.description" tag="span">
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue
new file mode 100644
index 00000000..487b78ba
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue
@@ -0,0 +1,127 @@
+<template>
+    <Dialog
+        :open="isGroupBansExportDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) setIsGroupBansExportDialogVisible();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-162.5">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.group_member_moderation.export_bans') }}</DialogTitle>
+            </DialogHeader>
+
+            <div style="margin-bottom: 10px" class="flex flex-col gap-2">
+                <label v-for="option in exportBansOptions" :key="option.label" class="inline-flex items-center gap-2">
+                    <Checkbox
+                        :model-value="checkedExportBansOptions.includes(option.label)"
+                        @update:modelValue="(val) => toggleExportOption(option.label, val)" />
+                    <span>{{ t(option.text) }}</span>
+                </label>
+            </div>
+            <br />
+            <InputGroupTextareaField
+                v-model="exportContent"
+                :rows="15"
+                readonly
+                style="margin-top: 15px"
+                input-class="resize-none"
+                @click="handleCopyExportContent" />
+        </DialogContent>
+    </Dialog>
+</template>
+
+<script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { ref, watch } from 'vue';
+    import { Checkbox } from '@/components/ui/checkbox';
+    import { InputGroupTextareaField } from '@/components/ui/input-group';
+    import { useI18n } from 'vue-i18n';
+
+    import { copyToClipboard } from '../../../shared/utils';
+
+    const { t } = useI18n();
+
+    const props = defineProps({
+        isGroupBansExportDialogVisible: {
+            type: Boolean,
+            default: false
+        },
+        groupBansModerationTable: {
+            type: Object,
+            default: () => {}
+        }
+    });
+
+    const emit = defineEmits(['update:isGroupBansExportDialogVisible']);
+
+    watch(
+        () => props.isGroupBansExportDialogVisible,
+        (newVal) => {
+            if (newVal) {
+                updateExportContent();
+            }
+        }
+    );
+
+    const exportContent = ref('');
+
+    const exportBansOptions = [
+        { label: 'userId', text: 'dialog.group_member_moderation.user_id' },
+        { label: 'displayName', text: 'dialog.group_member_moderation.display_name' },
+        { label: 'roles', text: 'dialog.group_member_moderation.roles' },
+        { label: 'managerNotes', text: 'dialog.group_member_moderation.notes' },
+        { label: 'joinedAt', text: 'dialog.group_member_moderation.joined_at' },
+        { label: 'bannedAt', text: 'dialog.group_member_moderation.banned_at' }
+    ];
+
+    const checkedExportBansOptions = ref(['userId', 'displayName', 'roles', 'managerNotes', 'joinedAt', 'bannedAt']);
+
+    function toggleExportOption(label, checked) {
+        const selection = checkedExportBansOptions.value;
+        const index = selection.indexOf(label);
+        if (checked && index === -1) {
+            selection.push(label);
+        } else if (!checked && index !== -1) {
+            selection.splice(index, 1);
+        }
+        updateExportContent();
+    }
+
+    function getRowValue(item, key) {
+        switch (key) {
+            case 'displayName':
+                return item?.user?.displayName ?? item?.$displayName ?? '';
+            case 'roles': {
+                const ids = Array.isArray(item?.roleIds) ? item.roleIds : [];
+                return ids.join(';');
+            }
+            default:
+                return item?.[key] ?? '';
+        }
+    }
+
+    function updateExportContent() {
+        const formatter = (str) => (/[\x00-\x1f,"]/.test(str) ? `"${str.replace(/"/g, '""')}"` : str);
+
+        const sortedCheckedOptions = exportBansOptions
+            .filter((option) => checkedExportBansOptions.value.includes(option.label))
+            .map((option) => option.label);
+
+        const header = `${sortedCheckedOptions.join(',')}\n`;
+
+        const content = props.groupBansModerationTable.data
+            .map((item) => sortedCheckedOptions.map((key) => formatter(String(getRowValue(item, key)))).join(','))
+            .join('\n');
+
+        exportContent.value = header + content;
+    }
+
+    function handleCopyExportContent() {
+        copyToClipboard(exportContent.value);
+    }
+
+    function setIsGroupBansExportDialogVisible() {
+        emit('update:isGroupBansExportDialogVisible', false);
+    }
+</script>
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
new file mode 100644
index 00000000..fee6efd6
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
@@ -0,0 +1,221 @@
+<template>
+    <Dialog
+        :open="isGroupBansImportDialogVisible"
+        @update:open="
+            (open) => {
+                if (!open) closeDialog();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-162.5">
+            <DialogHeader>
+                <DialogTitle>{{ t('dialog.group_member_moderation.import_bans') }}</DialogTitle>
+            </DialogHeader>
+
+            <div class="text-xs text-muted-foreground mb-2">
+                <p>{{ t('dialog.group_member_moderation.import_bans_description') }}</p>
+            </div>
+
+            <Alert variant="warning" class="mb-2">
+                <TriangleAlert />
+                <AlertDescription>
+                    {{ t('dialog.group_member_moderation.import_bans_warning') }}
+                </AlertDescription>
+            </Alert>
+
+            <InputGroupTextareaField
+                v-model="csvInput"
+                :rows="10"
+                :disabled="importing"
+                class="mb-2"
+                input-class="resize-none"
+                :placeholder="t('dialog.group_member_moderation.import_bans_placeholder')" />
+
+            <div class="flex items-center gap-2">
+                <Button size="sm" :disabled="!csvInput.trim() || importing" @click="parseAndImport">
+                    {{ t('dialog.group_member_moderation.import_bans_start') }}
+                </Button>
+                <Button v-if="importing" size="sm" variant="secondary" @click="cancelImport">
+                    {{ t('dialog.group_member_moderation.cancel') }}
+                </Button>
+                <span v-if="importing" class="text-sm">
+                    <Spinner class="inline-block ml-2 mr-2" />
+                    {{ t('dialog.group_member_moderation.progress') }}
+                    {{ progressCurrent }}/{{ progressTotal }}
+                </span>
+            </div>
+
+            <template v-if="errors">
+                <br />
+                <Button size="sm" variant="secondary" @click="errors = ''">
+                    {{ t('dialog.group_member_moderation.import_bans_clear_errors') }}
+                </Button>
+                <pre style="white-space: pre-wrap; font-size: 12px; margin-top: 5px" v-text="errors"></pre>
+            </template>
+
+            <template v-if="resultMessage">
+                <br />
+                <span class="text-sm">{{ resultMessage }}</span>
+            </template>
+        </DialogContent>
+    </Dialog>
+</template>
+
+<script setup>
+    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Alert, AlertDescription } from '@/components/ui/alert';
+    import { Button } from '@/components/ui/button';
+    import { InputGroupTextareaField } from '@/components/ui/input-group';
+    import { Spinner } from '@/components/ui/spinner';
+    import { TriangleAlert } from 'lucide-vue-next';
+    import { ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+
+    import { groupRequest } from '../../../api';
+
+    import * as workerTimers from 'worker-timers';
+
+    const { t } = useI18n();
+
+    const props = defineProps({
+        isGroupBansImportDialogVisible: {
+            type: Boolean,
+            default: false
+        },
+        groupId: {
+            type: String,
+            default: ''
+        }
+    });
+
+    const emit = defineEmits(['update:isGroupBansImportDialogVisible', 'imported']);
+
+    const csvInput = ref('');
+    const importing = ref(false);
+    const cancelled = ref(false);
+    const progressCurrent = ref(0);
+    const progressTotal = ref(0);
+    const errors = ref('');
+    const resultMessage = ref('');
+
+    /**
+     * Parse CSV input and extract user IDs.
+     * Supports:
+     * - Raw list of user IDs (one per line)
+     * - CSV with header row containing a "userId" column
+     * - Any column containing usr_ prefixed IDs
+     * @param input
+     */
+    function extractUserIds(input) {
+        const lines = input
+            .split('\n')
+            .map((l) => l.trim())
+            .filter((l) => l.length > 0);
+
+        if (lines.length === 0) return [];
+
+        const userIdRegex = /usr_[0-9A-Fa-f]{8}-([0-9A-Fa-f]{4}-){3}[0-9A-Fa-f]{12}/g;
+
+        // Try CSV with header: check if first line contains "userId"
+        const firstLine = lines[0];
+        const headers = firstLine.split(',').map((h) => h.trim());
+        const userIdColIndex = headers.findIndex((h) => h.toLowerCase() === 'userid');
+
+        if (userIdColIndex !== -1 && lines.length > 1) {
+            // CSV mode: extract from specific column
+            const ids = new Set();
+            for (let i = 1; i < lines.length; i++) {
+                const cols = lines[i].split(',');
+                if (cols.length > userIdColIndex) {
+                    const val = cols[userIdColIndex].trim().replace(/^"|"$/g, '');
+                    if (val.startsWith('usr_')) {
+                        ids.add(val);
+                    }
+                }
+            }
+            return [...ids];
+        }
+
+        // Fallback: extract all usr_ IDs from entire input
+        const ids = new Set();
+        let match;
+        while ((match = userIdRegex.exec(input)) !== null) {
+            ids.add(match[0]);
+        }
+        return [...ids];
+    }
+
+    /**
+     *
+     */
+    async function parseAndImport() {
+        const userIds = extractUserIds(csvInput.value);
+        if (userIds.length === 0) {
+            errors.value = 'No valid user IDs found (usr_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)';
+            return;
+        }
+
+        importing.value = true;
+        cancelled.value = false;
+        progressCurrent.value = 0;
+        progressTotal.value = userIds.length;
+        errors.value = '';
+        resultMessage.value = '';
+        let successCount = 0;
+
+        for (let i = 0; i < userIds.length; i++) {
+            if (cancelled.value) break;
+
+            const userId = userIds[i];
+            progressCurrent.value = i + 1;
+
+            try {
+                await groupRequest.banGroupMember({
+                    groupId: props.groupId,
+                    userId
+                });
+                successCount++;
+            } catch (err) {
+                errors.value += `${userId}: ${err}\n`;
+            }
+
+            // Rate limit delay between requests
+            if (i < userIds.length - 1 && !cancelled.value) {
+                await new Promise((resolve) => {
+                    workerTimers.setTimeout(resolve, 1000);
+                });
+            }
+        }
+
+        resultMessage.value = cancelled.value
+            ? `Cancelled. Banned ${successCount}/${progressCurrent.value} users.`
+            : `Done. Banned ${successCount}/${userIds.length} users.`;
+
+        importing.value = false;
+        progressCurrent.value = 0;
+        progressTotal.value = 0;
+
+        if (successCount > 0) {
+            emit('imported');
+        }
+    }
+
+    /**
+     *
+     */
+    function cancelImport() {
+        cancelled.value = true;
+    }
+
+    /**
+     *
+     */
+    function closeDialog() {
+        if (importing.value) {
+            cancelImport();
+        }
+        csvInput.value = '';
+        errors.value = '';
+        resultMessage.value = '';
+        emit('update:isGroupBansImportDialogVisible', false);
+    }
+</script>
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index a28a0722..448b7160 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -119,7 +119,7 @@
                                 :placeholder="t('dialog.group.members.search')"
                                 style="margin-top: 10px; margin-bottom: 10px"
                                 @input="groupMembersSearch" />
-                            <Button size="sm" variant="outline" @click="selectAllGroupMembers">{{
+                            <Button size="sm" variant="outline" @click="selectAll(groupMemberModerationTable.data)">{{
                                 t('dialog.group_member_moderation.select_all')
                             }}</Button>
                             <DataTableLayout
@@ -134,28 +134,54 @@
 
                     <template #bans>
                         <div style="margin-top: 10px">
-                            <Button
-                                class="rounded-full"
-                                variant="outline"
-                                size="icon-sm"
-                                :disabled="isGroupMembersLoading"
-                                @click="getAllGroupBans(groupMemberModeration.id)">
-                                <Spinner v-if="isGroupMembersLoading" />
-                                <RefreshCw v-else />
-                            </Button>
-                            <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
-                                groupBansModerationTable.data.length
-                            }}</span>
-                            <br />
-                            <InputGroupField
-                                v-model="groupBansModerationTable.filters[0].value"
-                                clearable
-                                size="sm"
-                                :placeholder="t('dialog.group.members.search')"
-                                style="margin-top: 10px; margin-bottom: 10px" />
-                            <Button size="sm" variant="outline" @click="selectAllGroupBans">{{
-                                t('dialog.group_member_moderation.select_all')
-                            }}</Button>
+                            <div class="flex justify-between">
+                                <div class="flex gap-2 items-center">
+                                    <Button
+                                        class="rounded-full"
+                                        variant="outline"
+                                        size="icon-sm"
+                                        :disabled="isGroupMembersLoading"
+                                        @click="getAllGroupBans(groupMemberModeration.id)">
+                                        <Spinner v-if="isGroupMembersLoading" />
+                                        <RefreshCw v-else />
+                                    </Button>
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        @click="selectAll(groupBansModerationTable.data)"
+                                        >{{ t('dialog.group_member_moderation.select_all') }}</Button
+                                    >
+                                    <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
+                                        groupBansModerationTable.data.length
+                                    }}</span>
+                                </div>
+
+                                <div class="flex gap-2 items-center">
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        :disabled="!groupBansModerationTable.data.length"
+                                        @click="showGroupBansExportDialog"
+                                        >{{ t('dialog.group_member_moderation.export_bans') }}</Button
+                                    >
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        :disabled="
+                                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
+                                        "
+                                        @click="showGroupBansImportDialog"
+                                        >{{ t('dialog.group_member_moderation.import_bans') }}</Button
+                                    >
+                                    <InputGroupField
+                                        v-model="groupBansModerationTable.filters[0].value"
+                                        clearable
+                                        size="sm"
+                                        class="w-80"
+                                        :placeholder="t('dialog.group.members.search')" />
+                                </div>
+                            </div>
+
                             <DataTableLayout
                                 style="margin-top: 10px"
                                 :table="groupBansModerationTanstackTable"
@@ -203,9 +229,12 @@
                                     }}</span>
                                 </template>
                                 <template #sent>
-                                    <Button size="sm" variant="outline" @click="selectAllGroupInvites">{{
-                                        t('dialog.group_member_moderation.select_all')
-                                    }}</Button>
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        @click="selectAll(groupInvitesModerationTable.data)"
+                                        >{{ t('dialog.group_member_moderation.select_all') }}</Button
+                                    >
                                     <DataTableLayout
                                         style="margin-top: 10px"
                                         :table="groupInvitesModerationTanstackTable"
@@ -224,15 +253,18 @@
                                                 )
                                             )
                                         "
-                                        @click="groupMembersDeleteSentInvite"
+                                        @click="handleDeleteSentInvite"
                                         >{{ t('dialog.group_member_moderation.delete_sent_invite') }}</Button
                                     >
                                 </template>
 
                                 <template #join>
-                                    <Button size="sm" variant="outline" @click="selectAllGroupJoinRequests">{{
-                                        t('dialog.group_member_moderation.select_all')
-                                    }}</Button>
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        @click="selectAll(groupJoinRequestsModerationTable.data)"
+                                        >{{ t('dialog.group_member_moderation.select_all') }}</Button
+                                    >
                                     <DataTableLayout
                                         style="margin-top: 10px"
                                         :table="groupJoinRequestsModerationTanstackTable"
@@ -252,7 +284,7 @@
                                             )
                                         "
                                         class="mr-2"
-                                        @click="groupMembersAcceptInviteRequest"
+                                        @click="handleAcceptInviteRequest"
                                         >{{ t('dialog.group_member_moderation.accept_join_requests') }}</Button
                                     >
                                     <Button
@@ -267,7 +299,7 @@
                                             )
                                         "
                                         class="mr-2"
-                                        @click="groupMembersRejectInviteRequest"
+                                        @click="handleRejectInviteRequest"
                                         >{{ t('dialog.group_member_moderation.reject_join_requests') }}</Button
                                     >
                                     <Button
@@ -281,15 +313,18 @@
                                                 )
                                             )
                                         "
-                                        @click="groupMembersBlockJoinRequest"
+                                        @click="handleBlockJoinRequest"
                                         >{{ t('dialog.group_member_moderation.block_join_requests') }}</Button
                                     >
                                 </template>
 
                                 <template #blocked>
-                                    <Button size="sm" variant="outline" @click="selectAllGroupBlocked">{{
-                                        t('dialog.group_member_moderation.select_all')
-                                    }}</Button>
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        @click="selectAll(groupBlockedModerationTable.data)"
+                                        >{{ t('dialog.group_member_moderation.select_all') }}</Button
+                                    >
                                     <DataTableLayout
                                         style="margin-top: 10px"
                                         :table="groupBlockedModerationTanstackTable"
@@ -308,7 +343,7 @@
                                                 )
                                             )
                                         "
-                                        @click="groupMembersDeleteBlockedRequest"
+                                        @click="handleDeleteBlockedRequest"
                                         >{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</Button
                                     >
                                 </template>
@@ -397,7 +432,7 @@
                     size="icon-sm"
                     variant="outline"
                     style="margin-left: 5px"
-                    @click="clearSelectedGroupMembers">
+                    @click="clearAllSelected">
                     <Trash2
                 /></Button>
                 <br />
@@ -427,7 +462,7 @@
                             color: inherit;
                             cursor: pointer;
                         "
-                        @click="deleteSelectedGroupMember(user)">
+                        @click="deleteSelectedUser(user)">
                         <X class="h-3 w-3" />
                     </button>
                 </Badge>
@@ -472,7 +507,7 @@
                                 !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
                             )
                         "
-                        @click="groupMembersAddRoles"
+                        @click="handleAddRoles"
                         >{{ t('dialog.group_member_moderation.add_roles') }}</Button
                     >
                     <Button
@@ -484,7 +519,7 @@
                                 !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
                             )
                         "
-                        @click="groupMembersRemoveRoles"
+                        @click="handleRemoveRoles"
                         >{{ t('dialog.group_member_moderation.remove_roles') }}</Button
                     >
                     <Button
@@ -495,7 +530,7 @@
                                 !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-manage')
                             )
                         "
-                        @click="groupMembersSaveNote"
+                        @click="handleSaveNote"
                         >{{ t('dialog.group_member_moderation.save_note') }}</Button
                     >
                     <Button
@@ -506,7 +541,7 @@
                                 !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-remove')
                             )
                         "
-                        @click="groupMembersKick"
+                        @click="handleKick"
                         >{{ t('dialog.group_member_moderation.kick') }}</Button
                     >
                     <Button
@@ -517,7 +552,7 @@
                                 !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
                             )
                         "
-                        @click="groupMembersBan"
+                        @click="handleBan"
                         >{{ t('dialog.group_member_moderation.ban') }}</Button
                     >
                     <Button
@@ -528,7 +563,7 @@
                                 !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
                             )
                         "
-                        @click="groupMembersUnban"
+                        @click="handleUnban"
                         >{{ t('dialog.group_member_moderation.unban') }}</Button
                     >
                     <span v-if="progressCurrent" style="margin-top: 10px">
@@ -548,12 +583,21 @@
             <group-member-moderation-export-dialog
                 v-model:isGroupLogsExportDialogVisible="isGroupLogsExportDialogVisible"
                 :group-logs-moderation-table="groupLogsModerationTable" />
+
+            <group-member-moderation-ban-export-dialog
+                v-model:isGroupBansExportDialogVisible="isGroupBansExportDialogVisible"
+                :group-bans-moderation-table="groupBansModerationTable" />
+
+            <group-member-moderation-ban-import-dialog
+                v-model:isGroupBansImportDialogVisible="isGroupBansImportDialogVisible"
+                :group-id="groupMemberModeration.id"
+                @imported="getAllGroupBans(groupMemberModeration.id)" />
         </DialogContent>
     </Dialog>
 </template>
 
 <script setup>
-    import { AlertTriangle, ArrowDown, Loader2, RefreshCw, Trash2, X } from 'lucide-vue-next';
+    import { AlertTriangle, ArrowDown, RefreshCw, Trash2, X } from 'lucide-vue-next';
     import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, reactive, ref, watch } from 'vue';
     import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
@@ -568,6 +612,7 @@
     import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../ui/dropdown-menu';
     import { debounce, hasGroupPermission, userImage, userImageFull } from '../../../shared/utils';
     import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores';
+    import { getAuditLogTypeName, resolveRoleNames } from './groupModerationUtils';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
     import { groupRequest, userRequest } from '../../../api';
     import { Badge } from '../../ui/badge';
@@ -578,8 +623,12 @@
     import { createColumns as createJoinRequestsColumns } from './groupMemberModerationJoinRequestsColumns.jsx';
     import { createColumns as createBlockedColumns } from './groupMemberModerationBlockedColumns.jsx';
     import { createColumns as createLogsColumns } from './groupMemberModerationLogsColumns.jsx';
+    import { useGroupBatchOperations } from './useGroupBatchOperations';
+    import { useGroupModerationSelection } from './useGroupModerationSelection';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
+    import GroupMemberModerationBanExportDialog from './GroupMemberModerationBanExportDialog.vue';
+    import GroupMemberModerationBanImportDialog from './GroupMemberModerationBanImportDialog.vue';
     import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';
 
     import * as workerTimers from 'worker-timers';
@@ -615,8 +664,6 @@
         { value: 'join', label: t('dialog.group_member_moderation.join_requests') },
         { value: 'blocked', label: t('dialog.group_member_moderation.blocked_requests') }
     ]);
-    const selectedUsers = reactive({});
-    const selectedUsersArray = ref([]);
     const isGroupMembersLoading = ref(false);
     const isGroupMembersDone = ref(false);
     const memberFilter = ref({
@@ -641,37 +688,15 @@
         roleId: ''
     });
 
-    function setSelectedUsers(usersId, user) {
-        if (!user) {
-            return;
-        }
-        selectedUsers[usersId] = user;
-        selectedUsersArray.value = Object.values(selectedUsers);
-    }
-
-    function deselectedUsers(userId, isAll = false) {
-        if (isAll) {
-            for (const id in selectedUsers) {
-                if (Object.prototype.hasOwnProperty.call(selectedUsers, id)) {
-                    delete selectedUsers[id];
-                }
-            }
-        } else {
-            if (Object.prototype.hasOwnProperty.call(selectedUsers, userId)) {
-                delete selectedUsers[userId];
-            }
-        }
-        selectedUsersArray.value = Object.values(selectedUsers);
-    }
-
-    function groupMemberModerationTableSelectionChange(row) {
-        if (row.$selected && !selectedUsers[row.userId]) {
-            setSelectedUsers(row.userId, row);
-        } else if (!row.$selected && selectedUsers[row.userId]) {
-            deselectedUsers(row.userId);
-        }
-    }
-
+    const groupMemberModerationTable = reactive({
+        data: [],
+        pageSize: 15
+    });
+    const groupBansModerationTable = reactive({
+        data: [],
+        filters: [{ prop: ['$displayName'], value: '' }],
+        pageSize: 15
+    });
     const groupInvitesModerationTable = reactive({
         data: [],
         pageSize: 15
@@ -689,28 +714,26 @@
         filters: [{ prop: ['description'], value: '' }],
         pageSize: 15
     });
-    const groupBansModerationTable = reactive({
-        data: [],
-        filters: [{ prop: ['$displayName'], value: '' }],
-        pageSize: 15
-    });
-    const groupMemberModerationTable = reactive({
-        data: [],
-        pageSize: 15
+
+    const {
+        selectedUsers,
+        selectedUsersArray,
+        setSelectedUsers,
+        deselectedUsers,
+        onSelectionChange,
+        deselectInTables,
+        deleteSelectedUser,
+        clearAllSelected,
+        selectAll
+    } = useGroupModerationSelection({
+        members: groupMemberModerationTable,
+        bans: groupBansModerationTable,
+        invites: groupInvitesModerationTable,
+        joinRequests: groupJoinRequestsModerationTable,
+        blocked: groupBlockedModerationTable
     });
 
-    const rolesText = (roleIds) => {
-        const ids = Array.isArray(roleIds) ? roleIds : [];
-        const roles = groupMemberModeration.value?.groupRef?.roles ?? [];
-        const names = [];
-        for (const id of ids) {
-            const role = roles.find((r) => r?.id === id);
-            if (role?.name) {
-                names.push(role.name);
-            }
-        }
-        return names.join(', ');
-    };
+    const rolesText = (roleIds) => resolveRoleNames(roleIds, groupMemberModeration.value?.groupRef?.roles ?? []);
 
     const groupMemberModerationColumns = computed(() =>
         createMembersColumns({
@@ -720,7 +743,7 @@
             userImageFull,
             onShowFullscreenImage: showFullscreenImageDialog,
             onShowUser: showUserDialog,
-            onSelectionChange: groupMemberModerationTableSelectionChange
+            onSelectionChange
         })
     );
 
@@ -763,7 +786,7 @@
             userImageFull,
             onShowFullscreenImage: showFullscreenImageDialog,
             onShowUser: showUserDialog,
-            onSelectionChange: groupMemberModerationTableSelectionChange
+            onSelectionChange
         })
     );
 
@@ -788,7 +811,7 @@
             userImageFull,
             onShowFullscreenImage: showFullscreenImageDialog,
             onShowUser: showUserDialog,
-            onSelectionChange: groupMemberModerationTableSelectionChange
+            onSelectionChange
         })
     );
 
@@ -813,7 +836,7 @@
             userImageFull,
             onShowFullscreenImage: showFullscreenImageDialog,
             onShowUser: showUserDialog,
-            onSelectionChange: groupMemberModerationTableSelectionChange
+            onSelectionChange
         })
     );
 
@@ -838,7 +861,7 @@
             userImageFull,
             onShowFullscreenImage: showFullscreenImageDialog,
             onShowUser: showUserDialog,
-            onSelectionChange: groupMemberModerationTableSelectionChange
+            onSelectionChange
         })
     );
 
@@ -893,60 +916,18 @@
         () => groupLogsModerationTanstackTable.getFilteredRowModel().rows.length
     );
 
-    function deselectGroupMember(userId) {
-        const deselectInTable = (tableData) => {
-            if (userId) {
-                const row = tableData.find((item) => item.userId === userId);
-                if (row) {
-                    row.$selected = false;
-                }
-            } else {
-                tableData.forEach((row) => {
-                    if (row.$selected) {
-                        row.$selected = false;
-                    }
-                });
-            }
-        };
-
-        deselectInTable(groupMemberModerationTable.data);
-        deselectInTable(groupBansModerationTable.data);
-        deselectInTable(groupInvitesModerationTable.data);
-        deselectInTable(groupJoinRequestsModerationTable.data);
-        deselectInTable(groupBlockedModerationTable.data);
-    }
-
     const selectUserId = ref('');
-    const progressCurrent = ref(0);
-    const progressTotal = ref(0);
     const selectedRoles = ref([]);
     const selectedAuditLogTypes = ref([]);
     const note = ref('');
     const isGroupLogsExportDialogVisible = ref(false);
+    const isGroupBansExportDialogVisible = ref(false);
+    const isGroupBansImportDialogVisible = ref(false);
 
-    watch(
-        () => groupMemberModeration.value.visible,
-        (newVal) => {
-            if (newVal) {
-                groupMemberModerationTable.data = [];
-                groupBansModerationTable.data = [];
-                groupInvitesModerationTable.data = [];
-                groupJoinRequestsModerationTable.data = [];
-                groupBlockedModerationTable.data = [];
-                groupLogsModerationTable.data = [];
-                Object.assign(selectedUsers, {});
-                selectedUsersArray.value = [];
-                selectUserId.value = '';
-                selectedRoles.value = [];
-                note.value = '';
-
-                if (groupMemberModeration.value.openWithUserId) {
-                    addGroupMemberToSelection(groupMemberModeration.value.openWithUserId);
-                }
-            }
-        }
-    );
-
+    /**
+     *
+     * @param args
+     */
     function handleGroupMemberRoleChange(args) {
         if (groupDialog.value.id === args.params.groupId) {
             groupDialog.value.members.forEach((member) => {
@@ -958,48 +939,132 @@
         }
     }
 
-    async function groupMembersDeleteSentInvite() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) {
-                break;
-            }
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            if (user.userId === currentUser.value.id) {
-                continue;
-            }
-            console.log(`Deleting group invite ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                await groupRequest.deleteSentGroupInvite({
-                    groupId: D.id,
-                    userId: user.userId
-                });
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to delete group invites: ${err}`);
-                allSuccess = false;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Deleted ${memberCount} group invites`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        getAllGroupInvites(D.id);
-    }
+    const {
+        progressCurrent,
+        progressTotal,
+        groupMembersBan,
+        groupMembersUnban,
+        groupMembersKick,
+        groupMembersSaveNote,
+        groupMembersRemoveRoles,
+        groupMembersAddRoles,
+        groupMembersDeleteSentInvite,
+        groupMembersAcceptInviteRequest,
+        groupMembersRejectInviteRequest,
+        groupMembersBlockJoinRequest,
+        groupMembersDeleteBlockedRequest
+    } = useGroupBatchOperations({
+        selectedUsersArray,
+        currentUser,
+        groupMemberModeration,
+        deselectedUsers,
+        groupRequest,
+        handleGroupMemberRoleChange,
+        handleGroupMemberProps
+    });
 
-    function selectAllGroupMembers() {
-        groupMemberModerationTable.data.forEach((row) => {
-            row.$selected = true;
-            setSelectedUsers(row.userId, row);
+    // Thin wrappers for template event handlers that require arguments
+    /**
+     *
+     */
+    function handleBan() {
+        groupMembersBan({ onComplete: () => getAllGroupBans(groupMemberModeration.value.id) });
+    }
+    /**
+     *
+     */
+    function handleUnban() {
+        groupMembersUnban({ onComplete: () => getAllGroupBans(groupMemberModeration.value.id) });
+    }
+    /**
+     *
+     */
+    function handleKick() {
+        groupMembersKick({ onComplete: () => loadAllGroupMembers() });
+    }
+    /**
+     *
+     */
+    function handleSaveNote() {
+        groupMembersSaveNote(note.value);
+    }
+    /**
+     *
+     */
+    function handleAddRoles() {
+        groupMembersAddRoles(selectedRoles.value);
+    }
+    /**
+     *
+     */
+    function handleRemoveRoles() {
+        groupMembersRemoveRoles(selectedRoles.value);
+    }
+    /**
+     *
+     */
+    function handleDeleteSentInvite() {
+        groupMembersDeleteSentInvite({ onComplete: () => getAllGroupInvites(groupMemberModeration.value.id) });
+    }
+    /**
+     *
+     */
+    function handleAcceptInviteRequest() {
+        groupMembersAcceptInviteRequest({
+            onComplete: () => getAllGroupInvitesAndJoinRequests(groupMemberModeration.value.id)
+        });
+    }
+    /**
+     *
+     */
+    function handleRejectInviteRequest() {
+        groupMembersRejectInviteRequest({
+            onComplete: () => getAllGroupInvitesAndJoinRequests(groupMemberModeration.value.id)
+        });
+    }
+    /**
+     *
+     */
+    function handleBlockJoinRequest() {
+        groupMembersBlockJoinRequest({
+            onComplete: () => getAllGroupInvitesAndJoinRequests(groupMemberModeration.value.id)
+        });
+    }
+    /**
+     *
+     */
+    function handleDeleteBlockedRequest() {
+        groupMembersDeleteBlockedRequest({
+            onComplete: () => getAllGroupInvitesAndJoinRequests(groupMemberModeration.value.id)
         });
     }
 
+    watch(
+        () => groupMemberModeration.value.visible,
+        (newVal) => {
+            if (newVal) {
+                groupMemberModerationTable.data = [];
+                groupBansModerationTable.data = [];
+                groupInvitesModerationTable.data = [];
+                groupJoinRequestsModerationTable.data = [];
+                groupBlockedModerationTable.data = [];
+                groupLogsModerationTable.data = [];
+                clearAllSelected();
+                selectUserId.value = '';
+                selectedRoles.value = [];
+                note.value = '';
+
+                if (groupMemberModeration.value.openWithUserId) {
+                    addGroupMemberToSelection(groupMemberModeration.value.openWithUserId);
+                }
+            }
+        }
+    );
+
+    /**
+     *
+     * @param groupId
+     */
     async function getAllGroupBans(groupId) {
         groupBansModerationTable.data = [];
         const params = { groupId, n: 100, offset: 0 };
@@ -1036,234 +1101,9 @@
         }
     }
 
-    function selectAllGroupBans() {
-        groupBansModerationTable.data.forEach((row) => {
-            row.$selected = true;
-            setSelectedUsers(row.userId, row);
-        });
-    }
-
-    async function groupMembersBan() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            if (user.userId === currentUser.value.id) continue;
-            console.log(`Banning ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                await groupRequest.banGroupMember({ groupId: D.id, userId: user.userId });
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to ban group member: ${err}`);
-            }
-        }
-        toast.success(`Banned ${memberCount} group members`);
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        getAllGroupBans(D.id);
-        deselectedUsers(null, true);
-    }
-
-    async function groupMembersUnban() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            if (user.userId === currentUser.value.id) continue;
-            console.log(`Unbanning ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                await groupRequest.unbanGroupMember({ groupId: D.id, userId: user.userId });
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to unban group member: ${err}`);
-                allSuccess = false;
-            }
-        }
-
-        if (allSuccess) {
-            toast.success(`Unbanned ${memberCount} group members`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        getAllGroupBans(D.id);
-        deselectedUsers(null, true);
-    }
-
-    async function groupMembersKick() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            if (user.userId === currentUser.value.id) continue;
-
-            console.log(`Kicking ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                await groupRequest.kickGroupMember({ groupId: D.id, userId: user.userId });
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to kick group member: ${err}`);
-                allSuccess = false;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Kicked ${memberCount} group members`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        deselectedUsers(null, true);
-        loadAllGroupMembers();
-    }
-
-    async function groupMembersSaveNote() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        const noteToSave = note.value;
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            if (user.managerNotes === noteToSave) {
-                continue;
-            }
-            console.log(`Setting note ${noteToSave} for ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                const args = await groupRequest.setGroupMemberProps(user.userId, D.id, { managerNotes: noteToSave });
-                handleGroupMemberProps(args);
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to set group member note for ${err}`);
-                allSuccess = false;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Saved notes for ${memberCount} group members`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        deselectedUsers(null, true);
-    }
-
-    async function groupMembersRemoveRoles() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const rolesToRemoveSet = new Set(selectedRoles.value);
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            const currentRoles = new Set(user.roleIds || []);
-            const rolesToRemoveForUser = [];
-            rolesToRemoveSet.forEach((roleId) => {
-                if (currentRoles.has(roleId)) {
-                    rolesToRemoveForUser.push(roleId);
-                }
-            });
-
-            if (!rolesToRemoveForUser.length) continue;
-
-            for (const roleId of rolesToRemoveForUser) {
-                console.log(`Removing role ${roleId} from ${user.userId} ${i + 1}/${memberCount}`);
-
-                try {
-                    const args = await groupRequest.removeGroupMemberRole({
-                        groupId: D.id,
-                        userId: user.userId,
-                        roleId
-                    });
-                    handleGroupMemberRoleChange(args);
-                } catch (err) {
-                    console.error(err);
-                    toast.error(`Failed to remove group member roles: ${err}`);
-                    allSuccess = false;
-                }
-            }
-            if (!groupMemberModeration.value.visible) {
-                break;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Roles removed`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        deselectedUsers(null, true);
-    }
-
-    async function groupMembersAddRoles() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const rolesToAddSet = new Set(selectedRoles.value);
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-
-            const currentRoles = new Set(user.roleIds || []);
-            const rolesToAddForUser = [];
-            rolesToAddSet.forEach((roleId) => {
-                if (!currentRoles.has(roleId)) {
-                    rolesToAddForUser.push(roleId);
-                }
-            });
-
-            if (!rolesToAddForUser.length) continue;
-
-            for (const roleId of rolesToAddForUser) {
-                console.log(`Adding role: ${roleId} to ${user.userId} ${i + 1}/${memberCount}`);
-                try {
-                    const args = await groupRequest.addGroupMemberRole({ groupId: D.id, userId: user.userId, roleId });
-                    handleGroupMemberRoleChange(args);
-                } catch (err) {
-                    console.error(err);
-                    toast.error(`Failed to add group member roles: ${err}`);
-                    allSuccess = false;
-                }
-            }
-            if (!groupMemberModeration.value.visible) {
-                break;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Added group member roles`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        deselectedUsers(null, true);
-    }
-
-    function deleteSelectedGroupMember(user) {
-        deselectedUsers(user.userId);
-        deselectGroupMember(user.userId);
-    }
-
-    function clearSelectedGroupMembers() {
-        deselectedUsers(null, true);
-        deselectGroupMember();
-    }
-
+    /**
+     *
+     */
     async function selectGroupMemberUserId() {
         const userIdInput = selectUserId.value;
         if (!userIdInput) return;
@@ -1287,6 +1127,10 @@
         selectUserId.value = '';
     }
 
+    /**
+     *
+     * @param userId
+     */
     async function addGroupMemberToSelection(userId) {
         const D = groupMemberModeration.value;
         // fetch member if there is one
@@ -1309,6 +1153,10 @@
         setSelectedUsers(member.userId, member);
     }
 
+    /**
+     *
+     * @param groupId
+     */
     async function getAllGroupLogs(groupId) {
         groupLogsModerationTable.data = [];
         const params = { groupId, n: 100, offset: 0 };
@@ -1350,131 +1198,10 @@
         }
     }
 
-    async function groupMembersDeleteBlockedRequest() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-
-            if (user.userId === currentUser.value.id) {
-                continue;
-            }
-
-            console.log(`Deleting blocked group request for ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                await groupRequest.deleteBlockedGroupRequest({ groupId: D.id, userId: user.userId });
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to delete blocked group requests: ${err}`);
-                allSuccess = false;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Deleted ${memberCount} blocked group requests`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        getAllGroupInvitesAndJoinRequests(D.id);
-        deselectedUsers(null, true);
-    }
-
-    async function groupMembersBlockJoinRequest() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            if (user.userId === currentUser.value.id) continue;
-
-            console.log(`Blocking group join request from ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                await groupRequest.blockGroupInviteRequest({ groupId: D.id, userId: user.userId });
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to block group join requests: ${err}`);
-                allSuccess = false;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Blocked ${memberCount} group join requests`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        getAllGroupInvitesAndJoinRequests(D.id);
-        deselectedUsers(null, true);
-    }
-
-    async function groupMembersRejectInviteRequest() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            if (user.userId === currentUser.value.id) continue;
-
-            console.log(`Rejecting group join request from ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                await groupRequest.rejectGroupInviteRequest({ groupId: D.id, userId: user.userId });
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to reject group join requests: ${err}`);
-                allSuccess = false;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Rejected ${memberCount} group join requests`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        getAllGroupInvitesAndJoinRequests(D.id);
-        deselectedUsers(null, true);
-    }
-
-    async function groupMembersAcceptInviteRequest() {
-        const D = groupMemberModeration.value;
-        const users = [...selectedUsersArray.value];
-        const memberCount = users.length;
-        progressTotal.value = memberCount;
-        let allSuccess = true;
-        for (let i = 0; i < memberCount; i++) {
-            if (!progressTotal.value) break;
-            const user = users[i];
-            progressCurrent.value = i + 1;
-            if (user.userId === currentUser.value.id) continue;
-
-            console.log(`Accepting group join request from ${user.userId} ${i + 1}/${memberCount}`);
-            try {
-                await groupRequest.acceptGroupInviteRequest({ groupId: D.id, userId: user.userId });
-            } catch (err) {
-                console.error(err);
-                toast.error(`Failed to accept group join requests: ${err}`);
-                allSuccess = false;
-            }
-        }
-        if (allSuccess) {
-            toast.success(`Accepted ${memberCount} group join requests`);
-        }
-        progressCurrent.value = 0;
-        progressTotal.value = 0;
-        getAllGroupInvitesAndJoinRequests(D.id);
-        deselectedUsers(null, true);
-    }
-
+    /**
+     *
+     * @param groupId
+     */
     async function getAllGroupInvitesAndJoinRequests(groupId) {
         try {
             await Promise.all([
@@ -1487,6 +1214,10 @@
         }
     }
 
+    /**
+     *
+     * @param groupId
+     */
     async function getAllGroupBlockedRequests(groupId) {
         groupBlockedModerationTable.data = [];
         const params = { groupId, n: 100, offset: 0, blocked: true };
@@ -1520,6 +1251,10 @@
         }
     }
 
+    /**
+     *
+     * @param groupId
+     */
     async function getAllGroupJoinRequests(groupId) {
         groupJoinRequestsModerationTable.data = [];
         const params = { groupId, n: 100, offset: 0, blocked: false };
@@ -1553,6 +1288,10 @@
         }
     }
 
+    /**
+     *
+     * @param groupId
+     */
     async function getAllGroupInvites(groupId) {
         groupInvitesModerationTable.data = [];
         const params = { groupId, n: 100, offset: 0 };
@@ -1588,39 +1327,30 @@
         }
     }
 
-    function selectAllGroupInvites() {
-        groupInvitesModerationTable.data.forEach((row) => {
-            row.$selected = true;
-            setSelectedUsers(row.userId, row);
-        });
-    }
-
-    function selectAllGroupJoinRequests() {
-        groupJoinRequestsModerationTable.data.forEach((row) => {
-            row.$selected = true;
-            setSelectedUsers(row.userId, row);
-        });
-    }
-
-    function selectAllGroupBlocked() {
-        groupBlockedModerationTable.data.forEach((row) => {
-            row.$selected = true;
-            setSelectedUsers(row.userId, row);
-        });
-    }
-
+    /**
+     *
+     */
     function showGroupLogsExportDialog() {
         isGroupLogsExportDialogVisible.value = true;
     }
 
-    function getAuditLogTypeName(auditLogType) {
-        if (!auditLogType) return '';
-        return auditLogType
-            .replace('group.', '')
-            .replace(/\./g, ' ')
-            .replace(/\b\w/g, (l) => l.toUpperCase());
+    /**
+     *
+     */
+    function showGroupBansExportDialog() {
+        isGroupBansExportDialogVisible.value = true;
     }
 
+    /**
+     *
+     */
+    function showGroupBansImportDialog() {
+        isGroupBansImportDialogVisible.value = true;
+    }
+
+    /**
+     *
+     */
     function groupMembersSearch() {
         if (memberSearch.value.length < 3) {
             groupMemberModerationTable.data = [];
@@ -1631,6 +1361,9 @@
         debounce(groupMembersSearchDebounced, 200)();
     }
 
+    /**
+     *
+     */
     function groupMembersSearchDebounced() {
         const groupId = groupMemberModeration.value.id;
         const search = memberSearch.value;
@@ -1667,6 +1400,9 @@
             });
     }
 
+    /**
+     *
+     */
     async function getGroupMembers() {
         members.value = [];
         isGroupMembersDone.value = false;
@@ -1702,6 +1438,9 @@
         await loadMoreGroupMembers();
     }
 
+    /**
+     *
+     */
     async function loadMoreGroupMembers() {
         if (isGroupMembersDone.value || isGroupMembersLoading.value) {
             return;
@@ -1754,6 +1493,10 @@
             });
     }
 
+    /**
+     *
+     * @param sortOrder
+     */
     async function setGroupMemberSortOrder(sortOrder) {
         if (memberSortOrder.value === sortOrder) {
             return;
@@ -1762,6 +1505,9 @@
         await getGroupMembers();
     }
 
+    /**
+     *
+     */
     async function loadAllGroupMembers() {
         if (isGroupMembersLoading.value) {
             return;
@@ -1777,6 +1523,10 @@
         }
     }
 
+    /**
+     *
+     * @param filter
+     */
     async function setGroupMemberFilter(filter) {
         if (memberFilter.value === filter) {
             return;
diff --git a/src/components/dialogs/GroupDialog/__tests__/groupModerationUtils.test.js b/src/components/dialogs/GroupDialog/__tests__/groupModerationUtils.test.js
new file mode 100644
index 00000000..9b1f4dd7
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/__tests__/groupModerationUtils.test.js
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+
+import { getAuditLogTypeName, resolveRoleNames } from '../groupModerationUtils';
+
+describe('getAuditLogTypeName', () => {
+    it('converts dotted audit log type to title case', () => {
+        expect(getAuditLogTypeName('group.member.ban')).toBe('Member Ban');
+    });
+
+    it('handles single segment after group prefix', () => {
+        expect(getAuditLogTypeName('group.update')).toBe('Update');
+    });
+
+    it('handles multiple segments', () => {
+        expect(getAuditLogTypeName('group.role.member.add')).toBe(
+            'Role Member Add'
+        );
+    });
+
+    it('returns empty string for falsy input', () => {
+        expect(getAuditLogTypeName('')).toBe('');
+        expect(getAuditLogTypeName(null)).toBe('');
+        expect(getAuditLogTypeName(undefined)).toBe('');
+    });
+});
+
+describe('resolveRoleNames', () => {
+    const roles = [
+        { id: 'role_1', name: 'Admin' },
+        { id: 'role_2', name: 'Moderator' },
+        { id: 'role_3', name: 'Member' }
+    ];
+
+    it('resolves role IDs to comma-separated names', () => {
+        expect(resolveRoleNames(['role_1', 'role_3'], roles)).toBe(
+            'Admin, Member'
+        );
+    });
+
+    it('returns empty string for empty roleIds', () => {
+        expect(resolveRoleNames([], roles)).toBe('');
+    });
+
+    it('skips unknown role IDs', () => {
+        expect(resolveRoleNames(['role_1', 'role_unknown'], roles)).toBe(
+            'Admin'
+        );
+    });
+
+    it('handles non-array roleIds gracefully', () => {
+        expect(resolveRoleNames(null, roles)).toBe('');
+        expect(resolveRoleNames(undefined, roles)).toBe('');
+    });
+
+    it('handles non-array roles gracefully', () => {
+        expect(resolveRoleNames(['role_1'], null)).toBe('');
+    });
+
+    it('returns single name without comma', () => {
+        expect(resolveRoleNames(['role_2'], roles)).toBe('Moderator');
+    });
+});
diff --git a/src/components/dialogs/GroupDialog/groupModerationUtils.js b/src/components/dialogs/GroupDialog/groupModerationUtils.js
new file mode 100644
index 00000000..b2d1eeaf
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/groupModerationUtils.js
@@ -0,0 +1,32 @@
+/**
+ * Convert an audit log type string to a human-readable name.
+ * e.g. 'group.member.ban' → 'Member Ban'
+ * @param {string} auditLogType
+ * @returns {string}
+ */
+export function getAuditLogTypeName(auditLogType) {
+    if (!auditLogType) return '';
+    return auditLogType
+        .replace('group.', '')
+        .replace(/\./g, ' ')
+        .replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
+/**
+ * Resolve an array of role IDs to a comma-separated string of role names.
+ * @param {Array<string>} roleIds
+ * @param {Array<{id: string, name: string}>} roles - available roles
+ * @returns {string}
+ */
+export function resolveRoleNames(roleIds, roles) {
+    const ids = Array.isArray(roleIds) ? roleIds : [];
+    const roleList = Array.isArray(roles) ? roles : [];
+    const names = [];
+    for (const id of ids) {
+        const role = roleList.find((r) => r?.id === id);
+        if (role?.name) {
+            names.push(role.name);
+        }
+    }
+    return names.join(', ');
+}
diff --git a/src/components/dialogs/GroupDialog/useGroupBatchOperations.js b/src/components/dialogs/GroupDialog/useGroupBatchOperations.js
new file mode 100644
index 00000000..fc0ba383
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/useGroupBatchOperations.js
@@ -0,0 +1,321 @@
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+
+/**
+ * Composable for batch moderation operations with progress tracking.
+ * @param {object} deps
+ * @param {import('vue').Ref} deps.selectedUsersArray
+ * @param {import('vue').Ref} deps.currentUser
+ * @param {import('vue').Ref} deps.groupMemberModeration
+ * @param {Function} deps.deselectedUsers
+ * @param {object} deps.groupRequest
+ * @param {Function} deps.handleGroupMemberRoleChange
+ * @param {Function} deps.handleGroupMemberProps
+ */
+export function useGroupBatchOperations(deps) {
+    const progressCurrent = ref(0);
+    const progressTotal = ref(0);
+
+    /**
+     * Generic batch operation runner.
+     * @param {object} options
+     * @param {Function} options.action - async (user, groupId) => void
+     * @param {string} options.logPrefix - e.g. 'Banning'
+     * @param {string} options.successMessage - e.g. 'Banned {count} group members'
+     * @param {string} options.errorMessage - e.g. 'Failed to ban group member'
+     * @param {boolean} [options.skipSelf]
+     * @param {Function} [options.onComplete] - called after the loop finishes
+     * @returns {Promise<void>}
+     */
+    async function runBatchOperation({
+        action,
+        logPrefix,
+        successMessage,
+        errorMessage,
+        skipSelf = true,
+        onComplete
+    }) {
+        const users = [...deps.selectedUsersArray.value];
+        const memberCount = users.length;
+        const groupId = deps.groupMemberModeration.value.id;
+        progressTotal.value = memberCount;
+        let allSuccess = true;
+
+        for (let i = 0; i < memberCount; i++) {
+            if (!progressTotal.value) break;
+            const user = users[i];
+            progressCurrent.value = i + 1;
+
+            if (skipSelf && user.userId === deps.currentUser.value.id) continue;
+
+            console.log(`${logPrefix} ${user.userId} ${i + 1}/${memberCount}`);
+            try {
+                await action(user, groupId);
+            } catch (err) {
+                console.error(err);
+                toast.error(`${errorMessage}: ${err}`);
+                allSuccess = false;
+            }
+        }
+
+        if (allSuccess) {
+            toast.success(successMessage.replace('{count}', memberCount));
+        }
+        progressCurrent.value = 0;
+        progressTotal.value = 0;
+        deps.deselectedUsers(null, true);
+        if (onComplete) onComplete();
+    }
+
+    /**
+     *
+     * @param callbacks
+     */
+    async function groupMembersBan(callbacks) {
+        await runBatchOperation({
+            action: (user, groupId) =>
+                deps.groupRequest.banGroupMember({
+                    groupId,
+                    userId: user.userId
+                }),
+            logPrefix: 'Banning',
+            successMessage: 'Banned {count} group members',
+            errorMessage: 'Failed to ban group member',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param callbacks
+     */
+    async function groupMembersUnban(callbacks) {
+        await runBatchOperation({
+            action: (user, groupId) =>
+                deps.groupRequest.unbanGroupMember({
+                    groupId,
+                    userId: user.userId
+                }),
+            logPrefix: 'Unbanning',
+            successMessage: 'Unbanned {count} group members',
+            errorMessage: 'Failed to unban group member',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param callbacks
+     */
+    async function groupMembersKick(callbacks) {
+        await runBatchOperation({
+            action: (user, groupId) =>
+                deps.groupRequest.kickGroupMember({
+                    groupId,
+                    userId: user.userId
+                }),
+            logPrefix: 'Kicking',
+            successMessage: 'Kicked {count} group members',
+            errorMessage: 'Failed to kick group member',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param noteValue
+     * @param callbacks
+     */
+    async function groupMembersSaveNote(noteValue, callbacks) {
+        await runBatchOperation({
+            action: async (user, groupId) => {
+                if (user.managerNotes === noteValue) return;
+                const args = await deps.groupRequest.setGroupMemberProps(
+                    user.userId,
+                    groupId,
+                    {
+                        managerNotes: noteValue
+                    }
+                );
+                deps.handleGroupMemberProps(args);
+            },
+            logPrefix: 'Setting note for',
+            successMessage: 'Saved notes for {count} group members',
+            errorMessage: 'Failed to set group member note for',
+            skipSelf: false,
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param roleIds
+     * @param callbacks
+     */
+    async function groupMembersRemoveRoles(roleIds, callbacks) {
+        const rolesToRemoveSet = new Set(roleIds);
+        await runBatchOperation({
+            action: async (user, groupId) => {
+                const currentRoles = new Set(user.roleIds || []);
+                const rolesToRemoveForUser = [];
+                rolesToRemoveSet.forEach((roleId) => {
+                    if (currentRoles.has(roleId)) {
+                        rolesToRemoveForUser.push(roleId);
+                    }
+                });
+                if (!rolesToRemoveForUser.length) return;
+                for (const roleId of rolesToRemoveForUser) {
+                    const args = await deps.groupRequest.removeGroupMemberRole({
+                        groupId,
+                        userId: user.userId,
+                        roleId
+                    });
+                    deps.handleGroupMemberRoleChange(args);
+                }
+            },
+            logPrefix: 'Removing roles from',
+            successMessage: 'Roles removed',
+            errorMessage: 'Failed to remove group member roles',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param roleIds
+     * @param callbacks
+     */
+    async function groupMembersAddRoles(roleIds, callbacks) {
+        const rolesToAddSet = new Set(roleIds);
+        await runBatchOperation({
+            action: async (user, groupId) => {
+                const currentRoles = new Set(user.roleIds || []);
+                const rolesToAddForUser = [];
+                rolesToAddSet.forEach((roleId) => {
+                    if (!currentRoles.has(roleId)) {
+                        rolesToAddForUser.push(roleId);
+                    }
+                });
+                if (!rolesToAddForUser.length) return;
+                for (const roleId of rolesToAddForUser) {
+                    const args = await deps.groupRequest.addGroupMemberRole({
+                        groupId,
+                        userId: user.userId,
+                        roleId
+                    });
+                    deps.handleGroupMemberRoleChange(args);
+                }
+            },
+            logPrefix: 'Adding roles to',
+            successMessage: 'Added group member roles',
+            errorMessage: 'Failed to add group member roles',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param callbacks
+     */
+    async function groupMembersDeleteSentInvite(callbacks) {
+        await runBatchOperation({
+            action: (user, groupId) =>
+                deps.groupRequest.deleteSentGroupInvite({
+                    groupId,
+                    userId: user.userId
+                }),
+            logPrefix: 'Deleting group invite',
+            successMessage: 'Deleted {count} group invites',
+            errorMessage: 'Failed to delete group invites',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param callbacks
+     */
+    async function groupMembersAcceptInviteRequest(callbacks) {
+        await runBatchOperation({
+            action: (user, groupId) =>
+                deps.groupRequest.acceptGroupInviteRequest({
+                    groupId,
+                    userId: user.userId
+                }),
+            logPrefix: 'Accepting group join request from',
+            successMessage: 'Accepted {count} group join requests',
+            errorMessage: 'Failed to accept group join requests',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param callbacks
+     */
+    async function groupMembersRejectInviteRequest(callbacks) {
+        await runBatchOperation({
+            action: (user, groupId) =>
+                deps.groupRequest.rejectGroupInviteRequest({
+                    groupId,
+                    userId: user.userId
+                }),
+            logPrefix: 'Rejecting group join request from',
+            successMessage: 'Rejected {count} group join requests',
+            errorMessage: 'Failed to reject group join requests',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param callbacks
+     */
+    async function groupMembersBlockJoinRequest(callbacks) {
+        await runBatchOperation({
+            action: (user, groupId) =>
+                deps.groupRequest.blockGroupInviteRequest({
+                    groupId,
+                    userId: user.userId
+                }),
+            logPrefix: 'Blocking group join request from',
+            successMessage: 'Blocked {count} group join requests',
+            errorMessage: 'Failed to block group join requests',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    /**
+     *
+     * @param callbacks
+     */
+    async function groupMembersDeleteBlockedRequest(callbacks) {
+        await runBatchOperation({
+            action: (user, groupId) =>
+                deps.groupRequest.deleteBlockedGroupRequest({
+                    groupId,
+                    userId: user.userId
+                }),
+            logPrefix: 'Deleting blocked group request for',
+            successMessage: 'Deleted {count} blocked group requests',
+            errorMessage: 'Failed to delete blocked group requests',
+            onComplete: callbacks?.onComplete
+        });
+    }
+
+    return {
+        progressCurrent,
+        progressTotal,
+        groupMembersBan,
+        groupMembersUnban,
+        groupMembersKick,
+        groupMembersSaveNote,
+        groupMembersRemoveRoles,
+        groupMembersAddRoles,
+        groupMembersDeleteSentInvite,
+        groupMembersAcceptInviteRequest,
+        groupMembersRejectInviteRequest,
+        groupMembersBlockJoinRequest,
+        groupMembersDeleteBlockedRequest
+    };
+}
diff --git a/src/components/dialogs/GroupDialog/useGroupModerationSelection.js b/src/components/dialogs/GroupDialog/useGroupModerationSelection.js
new file mode 100644
index 00000000..abc95f10
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/useGroupModerationSelection.js
@@ -0,0 +1,123 @@
+import { reactive, ref } from 'vue';
+
+/**
+ * Composable for managing selected users across all moderation tables.
+ * @param {object} tables - reactive table objects with `.data` arrays
+ * @param {object} tables.members
+ * @param {object} tables.bans
+ * @param {object} tables.invites
+ * @param {object} tables.joinRequests
+ * @param {object} tables.blocked
+ */
+export function useGroupModerationSelection(tables) {
+    const selectedUsers = reactive({});
+    const selectedUsersArray = ref([]);
+
+    /**
+     * @param {string} userId
+     * @param {object} user
+     */
+    function setSelectedUsers(userId, user) {
+        if (!user) return;
+        selectedUsers[userId] = user;
+        selectedUsersArray.value = Object.values(selectedUsers);
+    }
+
+    /**
+     * @param {string|null} userId
+     * @param {boolean} isAll
+     */
+    function deselectedUsers(userId, isAll = false) {
+        if (isAll) {
+            for (const id in selectedUsers) {
+                if (Object.prototype.hasOwnProperty.call(selectedUsers, id)) {
+                    delete selectedUsers[id];
+                }
+            }
+        } else {
+            if (Object.prototype.hasOwnProperty.call(selectedUsers, userId)) {
+                delete selectedUsers[userId];
+            }
+        }
+        selectedUsersArray.value = Object.values(selectedUsers);
+    }
+
+    /**
+     * @param {object} row
+     */
+    function onSelectionChange(row) {
+        if (row.$selected && !selectedUsers[row.userId]) {
+            setSelectedUsers(row.userId, row);
+        } else if (!row.$selected && selectedUsers[row.userId]) {
+            deselectedUsers(row.userId);
+        }
+    }
+
+    /**
+     * Deselect a user across all tables.
+     * @param {string} [userId] - if omitted, deselects all rows in all tables
+     */
+    function deselectInTables(userId) {
+        const allTables = [
+            tables.members,
+            tables.bans,
+            tables.invites,
+            tables.joinRequests,
+            tables.blocked
+        ];
+        for (const table of allTables) {
+            if (!table?.data) continue;
+            if (userId) {
+                const row = table.data.find((item) => item.userId === userId);
+                if (row) {
+                    row.$selected = false;
+                }
+            } else {
+                table.data.forEach((row) => {
+                    if (row.$selected) {
+                        row.$selected = false;
+                    }
+                });
+            }
+        }
+    }
+
+    /**
+     * @param {object} user
+     */
+    function deleteSelectedUser(user) {
+        deselectedUsers(user.userId);
+        deselectInTables(user.userId);
+    }
+
+    /**
+     *
+     */
+    function clearAllSelected() {
+        deselectedUsers(null, true);
+        deselectInTables();
+    }
+
+    /**
+     * Select all rows in a given table data array.
+     * @param {Array} tableData
+     */
+    function selectAll(tableData) {
+        tableData.forEach((row) => {
+            row.$selected = true;
+            setSelectedUsers(row.userId, row);
+        });
+    }
+
+    return {
+        selectedUsers,
+        selectedUsersArray,
+        setSelectedUsers,
+        deselectedUsers,
+        onSelectionChange,
+        deselectInTables,
+        deleteSelectedUser,
+        clearAllSelected,
+        selectAll
+    };
+}
diff --git a/src/components/ui/alert/index.js b/src/components/ui/alert/index.js
index 09260697..7df59b33 100644
--- a/src/components/ui/alert/index.js
+++ b/src/components/ui/alert/index.js
@@ -5,7 +5,7 @@ export { default as AlertDescription } from './AlertDescription.vue';
 export { default as AlertTitle } from './AlertTitle.vue';
 
 export const alertVariants = cva(
-    'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+    'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-1 [&>svg]:text-current',
     {
         variants: {
             variant: {
diff --git a/src/localization/en.json b/src/localization/en.json
index ccaa1ec9..81d1e69f 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -1915,7 +1915,14 @@
             "selected_roles": "Selected Roles",
             "remove_roles": "Remove Roles",
             "add_roles": "Add Roles",
-            "export_logs": "Export Logs"
+            "export_logs": "Export Logs",
+            "export_bans": "Export Bans",
+            "import_bans": "Import Bans",
+            "import_bans_description": "Paste CSV or user IDs below. The userId column will be auto-detected from CSV headers, or all usr_ IDs will be extracted.",
+            "import_bans_warning": "Do not import too many users at once. The API is rate-limited and may fail. You are responsible for any consequences.",
+            "import_bans_placeholder": "Paste CSV or user IDs here (one per line)\nusr_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
+            "import_bans_start": "Import & Ban",
+            "import_bans_clear_errors": "Clear Errors"
         },
         "group_post_edit": {
             "header": "Create/Edit Post",
diff --git a/src/shared/utils/__tests__/gallery.test.js b/src/shared/utils/__tests__/gallery.test.js
index 84f86204..28dbeb15 100644
--- a/src/shared/utils/__tests__/gallery.test.js
+++ b/src/shared/utils/__tests__/gallery.test.js
@@ -1,4 +1,5 @@
 import {
+    generateEmojiStyle,
     getEmojiFileName,
     getPrintFileName,
     getPrintLocalDate
@@ -311,4 +312,47 @@ describe('Gallery Utils', () => {
             });
         });
     });
+
+    describe('generateEmojiStyle', () => {
+        test('returns CSS with background url and animation', () => {
+            const style = generateEmojiStyle(
+                'https://example.com/emoji.png',
+                10,
+                4,
+                'linear',
+                100
+            );
+            expect(style).toContain("url('https://example.com/emoji.png')");
+            expect(style).toContain('animation:');
+            expect(style).toContain('steps(1)');
+        });
+
+        test('uses 2 framesPerLine for frameCount <= 4', () => {
+            const style = generateEmojiStyle('u', 10, 4, 'linear', 100);
+            // frameSize = 1024/2 = 512
+            expect(style).toContain('512px');
+        });
+
+        test('uses 4 framesPerLine for frameCount 5-16', () => {
+            const style = generateEmojiStyle('u', 10, 8, 'linear', 100);
+            // frameSize = 1024/4 = 256
+            expect(style).toContain('256px');
+        });
+
+        test('uses 8 framesPerLine for frameCount > 16', () => {
+            const style = generateEmojiStyle('u', 10, 20, 'linear', 100);
+            // frameSize = 1024/8 = 128
+            expect(style).toContain('128px');
+        });
+
+        test('uses alternate for pingpong loopStyle', () => {
+            const style = generateEmojiStyle('u', 10, 4, 'pingpong', 100);
+            expect(style).toContain('alternate');
+        });
+
+        test('uses none for non-pingpong loopStyle', () => {
+            const style = generateEmojiStyle('u', 10, 4, 'linear', 100);
+            expect(style).toMatch(/\bnone\b/);
+        });
+    });
 });
diff --git a/src/shared/utils/base/__tests__/array.test.js b/src/shared/utils/base/__tests__/array.test.js
index ef57813a..d73cc569 100644
--- a/src/shared/utils/base/__tests__/array.test.js
+++ b/src/shared/utils/base/__tests__/array.test.js
@@ -1,4 +1,9 @@
-import { removeFromArray } from '../array';
+import {
+    removeFromArray,
+    arraysMatch,
+    moveArrayItem,
+    replaceReactiveObject
+} from '../array';
 
 describe('Array Utils', () => {
     describe('removeFromArray', () => {
@@ -33,4 +38,91 @@ describe('Array Utils', () => {
             expect(arr).toEqual([1, 2]);
         });
     });
+
+    describe('arraysMatch', () => {
+        test('returns true for identical arrays', () => {
+            expect(arraysMatch([1, 2, 3], [1, 2, 3])).toBe(true);
+        });
+
+        test('returns false for different lengths', () => {
+            expect(arraysMatch([1, 2], [1, 2, 3])).toBe(false);
+        });
+
+        test('returns false for different content', () => {
+            expect(arraysMatch([1, 2], [1, 3])).toBe(false);
+        });
+
+        test('returns true for empty arrays', () => {
+            expect(arraysMatch([], [])).toBe(true);
+        });
+
+        test('returns false for non-array first arg', () => {
+            expect(arraysMatch(null, [])).toBe(false);
+        });
+
+        test('returns false for non-array second arg', () => {
+            expect(arraysMatch([], null)).toBe(false);
+        });
+
+        test('deep-compares objects via JSON', () => {
+            expect(arraysMatch([{ a: 1 }], [{ a: 1 }])).toBe(true);
+            expect(arraysMatch([{ a: 1 }], [{ a: 2 }])).toBe(false);
+        });
+    });
+
+    describe('moveArrayItem', () => {
+        test('moves item forward', () => {
+            const arr = ['a', 'b', 'c', 'd'];
+            moveArrayItem(arr, 0, 2);
+            expect(arr).toEqual(['b', 'c', 'a', 'd']);
+        });
+
+        test('moves item backward', () => {
+            const arr = ['a', 'b', 'c', 'd'];
+            moveArrayItem(arr, 3, 1);
+            expect(arr).toEqual(['a', 'd', 'b', 'c']);
+        });
+
+        test('no-ops when fromIndex equals toIndex', () => {
+            const arr = [1, 2, 3];
+            moveArrayItem(arr, 1, 1);
+            expect(arr).toEqual([1, 2, 3]);
+        });
+
+        test('no-ops for negative fromIndex', () => {
+            const arr = [1, 2, 3];
+            moveArrayItem(arr, -1, 0);
+            expect(arr).toEqual([1, 2, 3]);
+        });
+
+        test('no-ops for out-of-bounds toIndex', () => {
+            const arr = [1, 2, 3];
+            moveArrayItem(arr, 0, 5);
+            expect(arr).toEqual([1, 2, 3]);
+        });
+
+        test('no-ops for non-array input', () => {
+            expect(() => moveArrayItem(null, 0, 1)).not.toThrow();
+        });
+    });
+
+    describe('replaceReactiveObject', () => {
+        test('replaces all keys from source', () => {
+            const target = { a: 1, b: 2 };
+            replaceReactiveObject(target, { c: 3 });
+            expect(target).toEqual({ c: 3 });
+        });
+
+        test('clears target when source is empty', () => {
+            const target = { a: 1, b: 2 };
+            replaceReactiveObject(target, {});
+            expect(target).toEqual({});
+        });
+
+        test('overwrites existing keys', () => {
+            const target = { a: 1 };
+            replaceReactiveObject(target, { a: 99, b: 2 });
+            expect(target).toEqual({ a: 99, b: 2 });
+        });
+    });
 });