Moved some button to tools tab

src/views/Tools/dialogs/ExportAvatarsListDialog.vue

@@ -0,0 +1,105 @@
+<template>
+    <el-dialog v-model="isVisible" :title="t('dialog.export_own_avatars.header')" width="650px">
+        <el-input
+            v-model="exportAvatarsListCsv"
+            v-loading="loading"
+            type="textarea"
+            size="small"
+            :rows="15"
+            resize="none"
+            readonly
+            style="margin-top: 15px"
+            @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+    </el-dialog>
+</template>
+
+<script setup>
+    import { ref, computed, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { storeToRefs } from 'pinia';
+    import { avatarRequest } from '../../../api';
+    import { processBulk } from '../../../service/request';
+    import { useAvatarStore, useUserStore } from '../../../stores';
+
+    const { t } = useI18n();
+
+    const { applyAvatar, cachedAvatars } = useAvatarStore();
+    const { currentUser } = storeToRefs(useUserStore());
+
+    const props = defineProps({
+        isExportAvatarsListDialogVisible: {
+            type: Boolean,
+            required: true
+        }
+    });
+
+    const exportAvatarsListCsv = ref('');
+    const loading = ref(false);
+
+    const isVisible = computed({
+        get() {
+            return props.isExportAvatarsListDialogVisible;
+        },
+        set(value) {
+            emit('update:isExportAvatarsListDialogVisible', value);
+        }
+    });
+
+    const emit = defineEmits(['update:isExportAvatarsListDialogVisible']);
+
+    watch(
+        () => props.isExportAvatarsListDialogVisible,
+        (value) => {
+            if (value) {
+                initExportAvatarsListDialog();
+            }
+        }
+    );
+
+    function initExportAvatarsListDialog() {
+        loading.value = true;
+        for (const ref of cachedAvatars.values()) {
+            if (ref.authorId === currentUser.value.id) {
+                cachedAvatars.delete(ref.id);
+            }
+        }
+        const params = {
+            n: 50,
+            offset: 0,
+            sort: 'updated',
+            order: 'descending',
+            releaseStatus: 'all',
+            user: 'me'
+        };
+        const map = new Map();
+        processBulk({
+            fn: avatarRequest.getAvatars,
+            N: -1,
+            params,
+            handle: (args) => {
+                for (const json of args.json) {
+                    const ref = applyAvatar(json);
+                    map.set(ref.id, ref);
+                }
+            },
+            done: () => {
+                const avatars = Array.from(map.values());
+                if (Array.isArray(avatars) === false) {
+                    return;
+                }
+                const lines = ['AvatarID,AvatarName'];
+                const _ = function (str) {
+                    if (/[\x00-\x1f,"]/.test(str) === true) {
+                        return `"${str.replace(/"/g, '""')}"`;
+                    }
+                    return str;
+                };
+                for (const avatar of avatars) {
+                    lines.push(`${_(avatar.id)},${_(avatar.name)}`);
+                }
+                exportAvatarsListCsv.value = lines.join('\n');
+                loading.value = false;
+            }
+        });
+    }
+</script>

src/views/Tools/dialogs/ExportDiscordNamesDialog.vue

@@ -0,0 +1,100 @@
+<template>
+    <el-dialog
+        class="x-dialog"
+        :model-value="discordNamesDialogVisible"
+        :title="t('dialog.discord_names.header')"
+        width="650px"
+        @close="closeDialog">
+        <div style="font-size: 12px">
+            {{ t('dialog.discord_names.description') }}
+        </div>
+        <el-input
+            v-model="discordNamesContent"
+            type="textarea"
+            size="small"
+            :rows="15"
+            resize="none"
+            readonly
+            style="margin-top: 15px" />
+    </el-dialog>
+</template>
+
+<script setup>
+    import { storeToRefs } from 'pinia';
+    import { ref, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useUserStore } from '../../../stores';
+
+    const { t } = useI18n();
+    const { currentUser } = storeToRefs(useUserStore());
+
+    const props = defineProps({
+        discordNamesDialogVisible: {
+            type: Boolean,
+            default: false
+        },
+        friends: {
+            type: Map,
+            default: () => new Map()
+        }
+    });
+
+    watch(
+        () => props.discordNamesDialogVisible,
+        (newVal) => {
+            if (newVal) {
+                showDiscordNamesContent();
+            }
+        }
+    );
+
+    const emit = defineEmits(['update:discordNamesDialogVisible']);
+
+    const discordNamesContent = ref('');
+
+    function showDiscordNamesContent() {
+        const { friends } = currentUser.value;
+        if (Array.isArray(friends) === false) {
+            return;
+        }
+        const lines = ['DisplayName,DiscordName'];
+        const _ = function (str) {
+            if (/[\x00-\x1f,"]/.test(str) === true) {
+                return `"${str.replace(/"/g, '""')}"`;
+            }
+            return str;
+        };
+        for (const userId of friends) {
+            const { ref } = props.friends.get(userId);
+            let discord = '';
+            if (typeof ref === 'undefined') {
+                continue;
+            }
+            const name = ref.displayName;
+            if (ref.statusDescription) {
+                const statusRegex = /(?:discord|dc|dis)(?: |=|:|˸|;)(.*)/gi.exec(ref.statusDescription);
+                if (statusRegex) {
+                    discord = statusRegex[1];
+                }
+            }
+            if (!discord && ref.bio) {
+                const bioRegex = /(?:discord|dc|dis)(?: |=|:|˸|;)(.*)/gi.exec(ref.bio);
+                if (bioRegex) {
+                    discord = bioRegex[1];
+                }
+            }
+            if (!discord) {
+                continue;
+            }
+            discord = discord.trim();
+            lines.push(`${_(name)},${_(discord)}`);
+        }
+        discordNamesContent.value = lines.join('\n');
+    }
+
+    function closeDialog() {
+        emit('update:discordNamesDialogVisible', false);
+    }
+</script>
+
+<style scoped></style>

src/views/Tools/dialogs/ExportFriendsListDialog.vue

@@ -0,0 +1,97 @@
+<template>
+    <el-dialog :title="t('dialog.export_friends_list.header')" v-model="isVisible" width="650px">
+        <el-tabs type="card">
+            <el-tab-pane :label="t('dialog.export_friends_list.csv')">
+                <el-input
+                    v-model="exportFriendsListCsv"
+                    type="textarea"
+                    size="small"
+                    :rows="15"
+                    resize="none"
+                    readonly
+                    style="margin-top: 15px"
+                    @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+            </el-tab-pane>
+            <el-tab-pane :label="t('dialog.export_friends_list.json')">
+                <el-input
+                    v-model="exportFriendsListJson"
+                    type="textarea"
+                    size="small"
+                    :rows="15"
+                    resize="none"
+                    readonly
+                    style="margin-top: 15px"
+                    @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+            </el-tab-pane>
+        </el-tabs>
+    </el-dialog>
+</template>
+
+<script setup>
+    import { ref, computed, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { storeToRefs } from 'pinia';
+
+    import { useUserStore } from '../../../stores';
+
+    const props = defineProps({
+        friends: {
+            type: Map,
+            required: true
+        },
+        isExportFriendsListDialogVisible: {
+            type: Boolean,
+            required: true
+        }
+    });
+    const emit = defineEmits(['update:isExportFriendsListDialogVisible']);
+
+    const { currentUser } = storeToRefs(useUserStore());
+
+    const { t } = useI18n();
+
+    const exportFriendsListCsv = ref('');
+    const exportFriendsListJson = ref('');
+
+    const isVisible = computed({
+        get() {
+            return props.isExportFriendsListDialogVisible;
+        },
+        set(value) {
+            emit('update:isExportFriendsListDialogVisible', value);
+        }
+    });
+
+    watch(
+        () => props.isExportFriendsListDialogVisible,
+        (value) => {
+            if (value) {
+                initExportFriendsListDialog();
+            }
+        }
+    );
+
+    function initExportFriendsListDialog() {
+        const { friends } = currentUser.value;
+        if (Array.isArray(friends) === false) {
+            return;
+        }
+        const lines = ['UserID,DisplayName,Memo'];
+        const _ = function (str) {
+            if (/[\x00-\x1f,"]/.test(str) === true) {
+                return `"${str.replace(/"/g, '""')}"`;
+            }
+            return str;
+        };
+        const friendsList = [];
+        for (const userId of friends) {
+            const ref = props.friends.get(userId);
+            const name = (typeof ref !== 'undefined' && ref.name) || '';
+            const memo = (typeof ref !== 'undefined' && ref.memo.replace(/\n/g, ' ')) || '';
+            lines.push(`${_(userId)},${_(name)},${_(memo)}`);
+            friendsList.push(userId);
+        }
+        exportFriendsListJson.value = JSON.stringify({ friends: friendsList }, null, 4);
+        exportFriendsListCsv.value = lines.join('\n');
+    }
+</script>