refactor: app.js (#1291)

* refactor: frontend

* Fix avatar gallery sort

* Update .NET dependencies

* Update npm dependencies

electron v37.1.0

* bulkRefreshFriends

* fix dark theme

* Remove crowdin

* Fix config.json dialog not updating

* VRCX log file fixes & add Cef log

* Remove SharedVariable, fix startup

* Revert init theme change

* Logging date not working? Fix WinformThemer designer error

* Add Cef request hander, no more escaping main page

* clean

* fix

* fix

* clean

* uh

* Apply thememode at startup, fixes random user colours

* Split database into files

* Instance info remove empty lines

* Open external VRC links with VRCX

* Electron fixes

* fix userdialog style

* ohhhh

* fix store

* fix store

* fix: load all group members after kicking a user

* fix: world dialog favorite button style

* fix: Clear VRCX Cache Timer input value

* clean

* Fix VR overlay

* Fix VR overlay 2

* Fix Discord discord rich presence for RPC worlds

* Clean up age verified user tags

* Fix playerList being occupied after program reload

* no `this`

* Fix login stuck loading

* writable: false

* Hide dialogs on logout

* add flush sync option

* rm LOGIN event

* rm LOGOUT event

* remove duplicate event listeners

* remove duplicate event listeners

* clean

* remove duplicate event listeners

* clean

* fix theme style

* fix t

* clearable

* clean

* fix ipcEvent

* Small changes

* Popcorn Palace support

* Remove checkActiveFriends

* Clean up

* Fix dragEnterCef

* Block API requests when not logged in

* Clear state on login & logout

* Fix worldDialog instances not updating

* use <script setup>

* Fix avatar change event, CheckGameRunning at startup

* Fix image dragging

* fix

* Remove PWI

* fix updateLoop

* add webpack-dev-server to dev environment

* rm unnecessary chunks

* use <script setup>

* webpack-dev-server changes

* use <script setup>

* use <script setup>

* Fix UGC text size

* Split login event

* t

* use <script setup>

* fix

* Update .gitignore and enable checkJs in jsconfig

* fix i18n t

* use <script setup>

* use <script setup>

* clean

* global types

* fix

* use checkJs for debugging

* Add watchState for login watchers

* fix .vue template

* type fixes

* rm Vue.filter

* Cef v138.0.170, VC++ 2022

* Settings fixes

* Remove 'USER:CURRENT'

* clean up 2FA callbacks

* remove userApply

* rm i18n import

* notification handling to use notification store methods

* refactor favorite handling to use favorite store methods and clean up event emissions

* refactor moderation handling to use dedicated functions for player moderation events

* refactor friend handling to use dedicated functions for friend events

* Fix program startup, move lang init

* Fix friend state

* Fix status change error

* Fix user notes diff

* fix

* rm group event

* rm auth event

* rm avatar event

* clean

* clean

* getUser

* getFriends

* getFavoriteWorlds, getFavoriteAvatars

* AvatarGalleryUpload btn style & package.json update

* Fix friend requests

* Apply user

* Apply world

* Fix note diff

* Fix VR overlay

* Fixes

* Update build scripts

* Apply avatar

* Apply instance

* Apply group

* update hidden VRC+ badge

* Fix sameInstance "private"

* fix 502/504 API errors

* fix 502/504 API errors

* clean

* Fix friend in same instance on orange showing twice in friends list

* Add back in broken friend state repair methods

* add types

---------

Co-authored-by: Natsumi <cmcooper123@hotmail.com>

src/views/GameLog/GameLog.vue

@@ -40,7 +40,7 @@
                         v-model="gameLogTable.search"
                         :placeholder="t('view.game_log.search_placeholder')"
                         clearable
-                        style="flex: none; width: 150px; margin: 0 10px"
+                        style="flex: none; width: 150px; margin-left: 10px"
                         @keyup.native.enter="gameLogTableLookup"
                         @change="gameLogTableLookup"></el-input>
                 </div>
@@ -50,9 +50,9 @@
                 <template #default="scope">
                     <el-tooltip placement="right">
                         <template #content>
-                            <span>{{ scope.row.created_at | formatDate('long') }}</span>
+                            <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                         </template>
-                        <span>{{ scope.row.created_at | formatDate('short') }}</span>
+                        <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
                     </el-tooltip>
                 </template>
             </el-table-column>
@@ -99,16 +99,16 @@
 
             <el-table-column :label="t('table.gameLog.detail')" prop="data">
                 <template #default="scope">
-                    <location
+                    <Location
                         v-if="scope.row.type === 'Location'"
                         :location="scope.row.location"
                         :hint="scope.row.worldName"
-                        :grouphint="scope.row.groupName"></location>
-                    <location
+                        :grouphint="scope.row.groupName" />
+                    <Location
                         v-else-if="scope.row.type === 'PortalSpawn'"
                         :location="scope.row.instanceId"
                         :hint="scope.row.worldName"
-                        :grouphint="scope.row.groupName"></location>
+                        :grouphint="scope.row.groupName" />
                     <template v-else-if="scope.row.type === 'Event'">
                         <span v-text="scope.row.data"></span>
                     </template>
@@ -117,7 +117,9 @@
                     </template>
                     <template v-else-if="scope.row.type === 'VideoPlay'">
                         <span v-if="scope.row.videoId" style="margin-right: 5px">{{ scope.row.videoId }}:</span>
-                        <span v-if="scope.row.videoId === 'LSMedia'" v-text="scope.row.videoName"></span>
+                        <span
+                            v-if="scope.row.videoId === 'LSMedia' || scope.row.videoId === 'PopcornPalace'"
+                            v-text="scope.row.videoName"></span>
                         <span
                             v-else-if="scope.row.videoName"
                             class="x-link"
@@ -189,82 +191,48 @@
     </div>
 </template>
 
-<script>
-    export default {
-        name: 'GameLogTab'
-    };
-</script>
-
 <script setup>
-    import { inject, getCurrentInstance } from 'vue';
+    import { storeToRefs } from 'pinia';
+    import { getCurrentInstance } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
-    import utils from '../../classes/utils';
-    import database from '../../service/database';
-    import Location from '../../components/Location.vue';
+    import { database } from '../../service/database';
+    import { removeFromArray, openExternalLink, formatDateFilter } from '../../shared/utils';
+    import {
+        useUserStore,
+        useUiStore,
+        useWorldStore,
+        useAppearanceSettingsStore,
+        useInstanceStore,
+        useGameLogStore
+    } from '../../stores';
+    import { useSharedFeedStore } from '../../stores';
+
+    const { hideTooltips } = storeToRefs(useAppearanceSettingsStore());
+    const { showWorldDialog } = useWorldStore();
+    const { lookupUser } = useUserStore();
+    const { showPreviousInstancesInfoDialog } = useInstanceStore();
+    const { menuActiveIndex, shiftHeld } = storeToRefs(useUiStore());
+    const { gameLogIsFriend, gameLogIsFavorite, gameLogTableLookup } = useGameLogStore();
+    const { gameLogTable } = storeToRefs(useGameLogStore());
+    const { updateSharedFeed } = useSharedFeedStore();
 
     const { t } = useI18n();
-    const { $confirm } = getCurrentInstance().proxy;
+    const { proxy } = getCurrentInstance();
 
-    const showWorldDialog = inject('showWorldDialog');
-    const openExternalLink = inject('openExternalLink');
-    const showPreviousInstancesInfoDialog = inject('showPreviousInstancesInfoDialog');
-
-    const props = defineProps({
-        menuActiveIndex: {
-            type: String,
-            required: true
-        },
-        gameLogTable: {
-            type: Object,
-            required: true
-        },
-        hideTooltips: {
-            type: Boolean,
-            default: false
-        },
-        shiftHeld: {
-            type: Boolean,
-            default: false
-        },
-        gameLogIsFriend: {
-            type: Function,
-            default: () => () => false
-        },
-        gameLogIsFavorite: {
-            type: Function,
-            default: () => () => false
-        }
-    });
-
-    const emit = defineEmits([
-        'gameLogTableLookup',
-        'gameLogIsFriend',
-        'gameLogIsFavorite',
-        'lookupUser',
-        'updateGameLogSessionTable',
-        'updateSharedFeed'
-    ]);
-
-    function gameLogTableLookup() {
-        emit('gameLogTableLookup');
-    }
-
-    function lookupUser(ref) {
-        emit('lookupUser', ref);
-    }
+    const emit = defineEmits(['updateGameLogSessionTable']);
 
     function deleteGameLogEntry(row) {
-        utils.removeFromArray(props.gameLogTable.data, row);
+        removeFromArray(gameLogTable.value.data, row);
         database.deleteGameLogEntry(row);
         console.log('deleteGameLogEntry', row);
         database.getGamelogDatabase().then((data) => {
             emit('updateGameLogSessionTable', data);
-            emit('updateSharedFeed', true);
+            updateSharedFeed(true);
         });
     }
 
     function deleteGameLogEntryPrompt(row) {
-        $confirm('Continue? Delete Log', 'Confirm', {
+        proxy.$confirm('Continue? Delete Log', 'Confirm', {
             confirmButtonText: 'Confirm',
             cancelButtonText: 'Cancel',
             type: 'info',