Clean up boop dialog

src/app.scss

@@ -759,6 +759,10 @@ i.x-status-icon.red {
     max-height: 100%;
 }
 
+.el-card.x-image-selected {
+    border-color: var(--el-color-primary) !important;
+}
+
 // .el-tree-node {
 //     white-space: normal;
 // }
@@ -977,10 +981,6 @@ i.x-status-icon.red {
 //     top: 2px;
 // }
 
-// .max-height-el-select .el-select-dropdown__wrap {
-//     max-height: 83vh;
-// }
-
 // .el-pagination .el-input .el-input__icon {
 //     line-height: 22px;
 // }

src/components/dialogs/SendBoopDialog.vue

@@ -110,43 +110,7 @@
             clearable
             :placeholder="t('dialog.boop_dialog.select_emoji')"
             size="small"
-            style="width: 100%"
+            style="width: 100%">
-            popper-class="max-height-el-select">
-            <el-option-group :label="t('dialog.boop_dialog.my_emojis')">
-                <el-option
-                    v-for="image in emojiTable"
-                    :key="image.id"
-                    :value="image.id"
-                    style="width: 100%; height: 100%">
-                    <div
-                        v-if="
-                            image.versions &&
-                            image.versions.length > 0 &&
-                            image.versions[image.versions.length - 1].file.url
-                        "
-                        class="vrcplus-icon"
-                        style="overflow: hidden; width: 200px; height: 200px; padding: 10px">
-                        <template v-if="image.frames">
-                            <div
-                                class="avatar"
-                                :style="
-                                    generateEmojiStyle(
-                                        image.versions[image.versions.length - 1].file.url,
-                                        image.framesOverTime,
-                                        image.frames,
-                                        image.loopStyle
-                                    )
-                                "></div>
-                        </template>
-                        <template v-else>
-                            <img
-                                :src="image.versions[image.versions.length - 1].file.url"
-                                class="avatar"
-                                style="width: 200px; height: 200px" />
-                        </template>
-                    </div>
-                </el-option>
-            </el-option-group>
             <el-option-group :label="t('dialog.boop_dialog.default_emojis')">
                 <el-option
                     v-for="emojiName in photonEmojis"
@@ -158,6 +122,56 @@
             </el-option-group>
         </el-select>
 
+        <br />
+        <br />
+
+        <div
+            v-if="isLocalUserVrcPlusSupporter"
+            style="
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+                gap: 15px;
+                margin-top: 10px;
+                max-height: 600px;
+                overflow-y: auto;
+            ">
+            <el-card
+                v-for="image in emojiTable"
+                :key="image.id"
+                :body-style="{ padding: '0' }"
+                :class="image.id === fileId ? 'x-image-selected' : ''"
+                style="cursor: pointer"
+                @click="fileId = image.id"
+                shadow="hover">
+                <div
+                    v-if="
+                        image.versions &&
+                        image.versions.length > 0 &&
+                        image.versions[image.versions.length - 1].file.url
+                    "
+                    class="x-popover-image"
+                    style="overflow: hidden; width: 100px; height: 100px; padding: 8px">
+                    <div
+                        v-if="image.frames"
+                        class="avatar"
+                        :style="
+                            generateEmojiStyle(
+                                image.versions[image.versions.length - 1].file.url,
+                                image.framesOverTime,
+                                image.frames,
+                                image.loopStyle,
+                                100
+                            )
+                        "></div>
+                    <img
+                        v-else
+                        :src="image.versions[image.versions.length - 1].file.url"
+                        class="avatar"
+                        style="width: 100px; height: 100px" />
+                </div>
+            </el-card>
+        </div>
+
         <template #footer>
             <el-button
                 size="small"
@@ -197,6 +211,7 @@
     const { showGalleryDialog, refreshEmojiTable } = useGalleryStore();
     const { emojiTable } = storeToRefs(useGalleryStore());
     const { vipFriends, onlineFriends, activeFriends, offlineFriends } = useFriendStore();
+    const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
 
     const fileId = ref('');
 

src/service/request.js

@@ -206,6 +206,10 @@ export function request(endpoint, options) {
             if (status === 404 && endpoint.endsWith('/persist/exists')) {
                 return false;
             }
+            if (status === 404 && endpoint.endsWith('/respond')) {
+                // ignore when responding to expired notification
+                return null;
+            }
             if (
                 init.method === 'GET' &&
                 (status === 404 || status === 403) &&

src/shared/utils/gallery.js

@@ -60,13 +60,13 @@ function getEmojiFileName(emoji) {
  * @param {number} frameCount
  * @param {string} loopStyle
  */
-function generateEmojiStyle(url, fps, frameCount, loopStyle) {
+function generateEmojiStyle(url, fps, frameCount, loopStyle, size) {
     let framesPerLine = 2;
     if (frameCount > 4) framesPerLine = 4;
     if (frameCount > 16) framesPerLine = 8;
     const animationDurationMs = (1000 / fps) * frameCount;
     const frameSize = 1024 / framesPerLine;
-    const scale = 100 / (frameSize / 200);
+    const scale = 100 / (frameSize / size);
     const animStyle = loopStyle === 'pingpong' ? 'alternate' : 'none';
     const style = `
             transform: scale(${scale / 100});

src/views/Notifications/Notification.vue

@@ -592,6 +592,9 @@
         notificationRequest
             .sendNotificationResponse(params)
             .then((json) => {
+                if (!json) {
+                    return;
+                }
                 const args = {
                     json,
                     params

src/views/Tools/dialogs/GalleryDialog.vue

@@ -194,7 +194,9 @@
                             {{ t('dialog.gallery_icons.upload') }}
                         </el-button>
                     </el-button-group>
-                    <el-select v-model="emojiAnimationStyle" popper-class="max-height-el-select">
+                    <br />
+                    <br />
+                    <el-select v-model="emojiAnimationStyle">
                         <el-option-group>
                             {{ t('dialog.gallery_icons.emoji_animation_styles') }}
                             <el-option
@@ -213,7 +215,7 @@
                             </el-option>
                         </el-option-group>
                     </el-select>
-                    <el-checkbox v-model="emojiAnimType" style="margin-left: 10px; margin-right: 10px">
+                    <el-checkbox v-model="emojiAnimType">
                         <span>{{ t('dialog.gallery_icons.emoji_animation_type') }}</span>
                     </el-checkbox>
                     <template v-if="emojiAnimType">
@@ -266,7 +268,8 @@
                                             image.versions[image.versions.length - 1].file.url,
                                             image.framesOverTime,
                                             image.frames,
-                                            image.loopStyle
+                                            image.loopStyle,
+                                            200
                                         )
                                     "></div>
                             </template>