From 42547b43fb5828f7d03160101333b06e5a1e66b8 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Tue, 16 Dec 2025 20:16:12 +0900
Subject: [PATCH] add row key to feed items and gamelog items

---
 src/stores/feed.js            |   3 +-
 src/stores/gameLog.js         |   3 +-
 src/views/Feed/Feed.vue       | 188 ++++++++--------------------------
 src/views/GameLog/GameLog.vue |  25 ++---
 4 files changed, 54 insertions(+), 165 deletions(-)

diff --git a/src/stores/feed.js b/src/stores/feed.js
index 4c425906..660ca245 100644
--- a/src/stores/feed.js
+++ b/src/stores/feed.js
@@ -30,7 +30,8 @@ export const useFeedStore = defineStore('Feed', () => {
             defaultSort: {
                 prop: 'created_at',
                 order: 'descending'
-            }
+            },
+            rowKey: (row) => `${row.type}:${row.rowId ?? Math.random()}`
         },
         pageSize: 20,
         pageSizeLinked: true,
diff --git a/src/stores/gameLog.js b/src/stores/gameLog.js
index f9ec7858..ca5c9f95 100644
--- a/src/stores/gameLog.js
+++ b/src/stores/gameLog.js
@@ -69,7 +69,8 @@ export const useGameLogStore = defineStore('GameLog', () => {
             defaultSort: {
                 prop: 'created_at',
                 order: 'descending'
-            }
+            },
+            rowKey: (row) => `${row.type}:${row.rowId ?? Math.random()}`
         },
         pageSize: 20,
         pageSizeLinked: true,
diff --git a/src/views/Feed/Feed.vue b/src/views/Feed/Feed.vue
index 62439966..e0af02ce 100644
--- a/src/views/Feed/Feed.vue
+++ b/src/views/Feed/Feed.vue
@@ -70,106 +70,53 @@
                         </template>
                         <template v-else-if="scope.row.type === 'Avatar'">
                             <div style="display: flex; align-items: center">
-                                <el-popover placement="right" :width="500" trigger="click">
-                                    <template #reference>
-                                        <div style="display: inline-block; vertical-align: top; width: 160px">
-                                            <template v-if="scope.row.previousCurrentAvatarThumbnailImageUrl">
-                                                <img
-                                                    :src="scope.row.previousCurrentAvatarThumbnailImageUrl"
-                                                    class="x-link"
-                                                    style="flex: none; width: 160px; height: 120px; border-radius: 4px"
-                                                    loading="lazy" />
-                                                <br />
-                                                <AvatarInfo
-                                                    :imageurl="scope.row.previousCurrentAvatarThumbnailImageUrl"
-                                                    :userid="scope.row.userId"
-                                                    :hintownerid="scope.row.previousOwnerId"
-                                                    :hintavatarname="scope.row.previousAvatarName"
-                                                    :avatartags="scope.row.previousCurrentAvatarTags" />
-                                            </template>
-                                        </div>
+                                <div style="display: inline-block; vertical-align: top; width: 160px">
+                                    <template v-if="scope.row.previousCurrentAvatarThumbnailImageUrl">
+                                        <img
+                                            :src="scope.row.previousCurrentAvatarThumbnailImageUrl"
+                                            class="x-link"
+                                            style="flex: none; width: 160px; height: 120px; border-radius: 4px"
+                                            loading="lazy" />
+                                        <br />
+                                        <AvatarInfo
+                                            :imageurl="scope.row.previousCurrentAvatarThumbnailImageUrl"
+                                            :userid="scope.row.userId"
+                                            :hintownerid="scope.row.previousOwnerId"
+                                            :hintavatarname="scope.row.previousAvatarName"
+                                            :avatartags="scope.row.previousCurrentAvatarTags" />
                                     </template>
-                                    <img
-                                        :src="scope.row.previousCurrentAvatarImageUrl"
-                                        :class="['x-link', 'x-popover-image']"
-                                        @click="showFullscreenImageDialog(scope.row.previousCurrentAvatarImageUrl)"
-                                        loading="lazy" />
-                                </el-popover>
+                                </div>
                                 <span style="position: relative; margin: 0 10px">
                                     <el-icon><Right /></el-icon>
                                 </span>
-                                <el-popover placement="right" :width="500" trigger="click">
-                                    <template #reference>
-                                        <div style="display: inline-block; vertical-align: top; width: 160px">
-                                            <template v-if="scope.row.currentAvatarThumbnailImageUrl">
-                                                <img
-                                                    :src="scope.row.currentAvatarThumbnailImageUrl"
-                                                    class="x-link"
-                                                    style="flex: none; width: 160px; height: 120px; border-radius: 4px"
-                                                    loading="lazy" />
-                                                <br />
-                                                <AvatarInfo
-                                                    :imageurl="scope.row.currentAvatarThumbnailImageUrl"
-                                                    :userid="scope.row.userId"
-                                                    :hintownerid="scope.row.ownerId"
-                                                    :hintavatarname="scope.row.avatarName"
-                                                    :avatartags="scope.row.currentAvatarTags" />
-                                            </template>
-                                        </div>
+
+                                <div style="display: inline-block; vertical-align: top; width: 160px">
+                                    <template v-if="scope.row.currentAvatarThumbnailImageUrl">
+                                        <img
+                                            :src="scope.row.currentAvatarThumbnailImageUrl"
+                                            class="x-link"
+                                            style="flex: none; width: 160px; height: 120px; border-radius: 4px"
+                                            loading="lazy" />
+                                        <br />
+                                        <AvatarInfo
+                                            :imageurl="scope.row.currentAvatarThumbnailImageUrl"
+                                            :userid="scope.row.userId"
+                                            :hintownerid="scope.row.ownerId"
+                                            :hintavatarname="scope.row.avatarName"
+                                            :avatartags="scope.row.currentAvatarTags" />
                                     </template>
-                                    <img
-                                        :src="scope.row.currentAvatarImageUrl"
-                                        :class="['x-link', 'x-popover-image']"
-                                        @click="showFullscreenImageDialog(scope.row.currentAvatarImageUrl)"
-                                        loading="lazy" />
-                                </el-popover>
+                                </div>
                             </div>
                         </template>
                         <template v-else-if="scope.row.type === 'Status'">
-                            <el-tooltip placement="top">
-                                <template #content>
-                                    <span v-if="scope.row.previousStatus === 'active'">{{
-                                        t('dialog.user.status.active')
-                                    }}</span>
-                                    <span v-else-if="scope.row.previousStatus === 'join me'">{{
-                                        t('dialog.user.status.join_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.previousStatus === 'ask me'">{{
-                                        t('dialog.user.status.ask_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.previousStatus === 'busy'">{{
-                                        t('dialog.user.status.busy')
-                                    }}</span>
-                                    <span v-else>{{ t('dialog.user.status.offline') }}</span>
-                                </template>
-                                <i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
-                            </el-tooltip>
+                            <i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
                             <span style="margin-left: 5px" v-text="scope.row.previousStatusDescription"></span>
                             <br />
                             <span>
                                 <el-icon><Right /></el-icon>
                             </span>
-                            <el-tooltip placement="top">
-                                <template #content>
-                                    <span v-if="scope.row.status === 'active'">{{
-                                        t('dialog.user.status.active')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'join me'">{{
-                                        t('dialog.user.status.join_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'ask me'">{{
-                                        t('dialog.user.status.ask_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'busy'">{{
-                                        t('dialog.user.status.busy')
-                                    }}</span>
-                                    <span v-else>{{ t('dialog.user.status.offline') }}</span>
-                                </template>
-                                <i
-                                    class="x-user-status"
-                                    :class="statusClass(scope.row.status)"
-                                    style="margin: 0 5px"></i>
-                            </el-tooltip>
+
+                            <i class="x-user-status" :class="statusClass(scope.row.status)" style="margin: 0 5px"></i>
                             <span v-text="scope.row.statusDescription"></span>
                         </template>
                         <template v-else-if="scope.row.type === 'Bio'">
@@ -226,68 +173,18 @@
                     </template>
                     <template v-else-if="scope.row.type === 'Status'">
                         <template v-if="scope.row.statusDescription === scope.row.previousStatusDescription">
-                            <el-tooltip placement="top">
-                                <template #content>
-                                    <span v-if="scope.row.previousStatus === 'active'">{{
-                                        t('dialog.user.status.active')
-                                    }}</span>
-                                    <span v-else-if="scope.row.previousStatus === 'join me'">{{
-                                        t('dialog.user.status.join_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.previousStatus === 'ask me'">{{
-                                        t('dialog.user.status.ask_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.previousStatus === 'busy'">{{
-                                        t('dialog.user.status.busy')
-                                    }}</span>
-                                    <span v-else>{{ t('dialog.user.status.offline') }}</span>
-                                </template>
-                                <i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
-                            </el-tooltip>
+                            <i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
                             <span style="margin: 0 5px">
                                 <el-icon><Right /></el-icon>
                             </span>
-                            <el-tooltip placement="top">
-                                <template #content>
-                                    <span v-if="scope.row.status === 'active'">{{
-                                        t('dialog.user.status.active')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'join me'">{{
-                                        t('dialog.user.status.join_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'ask me'">{{
-                                        t('dialog.user.status.ask_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'busy'">{{
-                                        t('dialog.user.status.busy')
-                                    }}</span>
-                                    <span v-else>{{ t('dialog.user.status.offline') }}</span>
-                                </template>
-                                <i class="x-user-status" :class="statusClass(scope.row.status)"></i>
-                            </el-tooltip>
+
+                            <i class="x-user-status" :class="statusClass(scope.row.status)"></i>
                         </template>
                         <template v-else>
-                            <el-tooltip placement="top">
-                                <template #content>
-                                    <span v-if="scope.row.status === 'active'">{{
-                                        t('dialog.user.status.active')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'join me'">{{
-                                        t('dialog.user.status.join_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'ask me'">{{
-                                        t('dialog.user.status.ask_me')
-                                    }}</span>
-                                    <span v-else-if="scope.row.status === 'busy'">{{
-                                        t('dialog.user.status.busy')
-                                    }}</span>
-                                    <span v-else>{{ t('dialog.user.status.offline') }}</span>
-                                </template>
-                                <i
-                                    class="x-user-status"
-                                    :class="statusClass(scope.row.status)"
-                                    style="margin-right: 3px"></i>
-                            </el-tooltip>
+                            <i
+                                class="x-user-status"
+                                :class="statusClass(scope.row.status)"
+                                style="margin-right: 3px"></i>
                             <span v-text="scope.row.statusDescription"></span>
                         </template>
                     </template>
@@ -313,13 +210,12 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { useFeedStore, useGalleryStore, useUiStore, useUserStore } from '../../stores';
     import { formatDateFilter, statusClass, timeToText } from '../../shared/utils';
+    import { useFeedStore, useUserStore } from '../../stores';
 
     const { showUserDialog } = useUserStore();
     const { feedTable } = storeToRefs(useFeedStore());
     const { feedTableLookup } = useFeedStore();
-    const { showFullscreenImageDialog } = useGalleryStore();
 
     const { t } = useI18n();
 
diff --git a/src/views/GameLog/GameLog.vue b/src/views/GameLog/GameLog.vue
index 06434a1d..f6610fb0 100644
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -54,29 +54,20 @@
 
             <el-table-column :label="t('table.gameLog.type')" prop="type" width="120">
                 <template #default="scope">
-                    <el-tooltip placement="right" :show-after="500">
-                        <template #content>
-                            <span>{{ t('view.game_log.filters.' + scope.row.type) }}</span>
-                        </template>
-                        <span
-                            v-if="scope.row.location && scope.row.type !== 'Location'"
-                            class="x-link"
-                            @click="showWorldDialog(scope.row.location)"
-                            v-text="t('view.game_log.filters.' + scope.row.type)"></span>
-                        <span v-else v-text="t('view.game_log.filters.' + scope.row.type)"></span>
-                    </el-tooltip>
+                    <span
+                        v-if="scope.row.location && scope.row.type !== 'Location'"
+                        class="x-link"
+                        @click="showWorldDialog(scope.row.location)"
+                        v-text="t('view.game_log.filters.' + scope.row.type)"></span>
+                    <span v-else v-text="t('view.game_log.filters.' + scope.row.type)"></span>
                 </template>
             </el-table-column>
 
             <el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
                 <template #default="scope">
                     <template v-if="gameLogIsFriend(scope.row)">
-                        <el-tooltip v-if="gameLogIsFavorite(scope.row)" placement="top" content="Favorite">
-                            <span>⭐</span>
-                        </el-tooltip>
-                        <el-tooltip v-else placement="top" content="Friend">
-                            <span>💚</span>
-                        </el-tooltip>
+                        <span v-if="gameLogIsFavorite(scope.row)">⭐</span>
+                        <span v-else>💚</span>
                     </template>
                     <span v-else></span>
                 </template>