Favorites action buttons clean up and tooltips

Dotnet/WebApi.cs

@@ -525,7 +525,7 @@ namespace VRCX
                 
                 var message = webException.Message;
                 if (webException.InnerException != null)
-                    message += $" | Inner Exception: {webException.InnerException.Message}";
+                    message += $" | Inner Exception: {webException.InnerException}";
                 return new Tuple<int, string>(
                     -1,
                     message
@@ -535,7 +535,7 @@ namespace VRCX
             {
                 var message = e.Message;
                 if (e.InnerException != null)
-                    message += $" | Inner Exception: {e.InnerException.Message}";
+                    message += $" | Inner Exception: {e.InnerException}";
                 return new Tuple<int, string>(
                     -1,
                     message

src/localization/en/en.json

@@ -148,6 +148,7 @@
             "move_tooltip": "Move",
             "copy_tooltip": "Copy",
             "unfavorite_tooltip": "Unfavorite",
+            "edit_favorite_tooltip": "Edit Favorite",
             "visibility_tooltip": "Change Visibility",
             "rename_tooltip": "Rename",
             "clear_tooltip": "Clear",

src/stores/launch.js

@@ -193,6 +193,7 @@ export const useLaunchStore = defineStore('Launch', () => {
         launchDialogData,
         showLaunchOptions,
         showLaunchDialog,
+        getLaunchUrl,
         launchGame,
         tryOpenInstanceInVrc
     };

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -78,17 +78,20 @@
                             </el-tooltip>
                         </div>
                         <div class="favorites-search-card__action">
-                            <el-tooltip placement="bottom" :content="t('view.favorite.unfavorite_tooltip')">
+                            <el-tooltip
+                                v-if="showDangerUnfavorite"
+                                placement="bottom"
+                                :content="t('view.favorite.unfavorite_tooltip')">
                                 <el-button
-                                    v-if="showDangerUnfavorite"
                                     size="small"
                                     :icon="Close"
                                     circle
                                     class="favorites-search-card__action-btn"
                                     type="danger"
                                     @click.stop="handlePrimaryDeleteAction" />
+                            </el-tooltip>
+                            <el-tooltip v-else placement="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <el-button
-                                    v-else
                                     type="default"
                                     :icon="Star"
                                     size="small"
@@ -187,9 +190,6 @@
     });
 
     const showDangerUnfavorite = computed(() => {
-        if (props.isLocalFavorite) {
-            return shiftHeld.value;
-        }
         return shiftHeld.value;
     });
 

src/views/Favorites/components/FavoritesFriendItem.vue

@@ -48,7 +48,7 @@
                 </template>
                 <template v-else>
                     <div class="favorites-search-card__action">
-                        <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
+                        <el-tooltip placement="right" :content="t('view.favorite.edit_favorite_tooltip')">
                             <el-button
                                 size="small"
                                 :icon="Star"

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -62,15 +62,40 @@
                     </div>
                 </template>
                 <template v-else>
-                    <div class="favorites-search-card__action">
+                    <div class="favorites-search-card__action-group">
-                        <el-tooltip placement="top" :content="inviteOrLaunchText">
+                        <div class="favorites-search-card__action">
-                            <el-button
+                            <el-tooltip placement="top" :content="inviteOrLaunchText">
-                                size="small"
+                                <el-button
-                                :icon="Message"
+                                    size="small"
-                                class="favorites-search-card__action-btn"
+                                    :icon="Message"
-                                @click.stop="newInstanceSelfInvite(favorite.id)"
+                                    class="favorites-search-card__action-btn"
-                                circle />
+                                    @click.stop="newInstanceSelfInvite(favorite.id)"
-                        </el-tooltip>
+                                    circle />
+                            </el-tooltip>
+                        </div>
+                        <div class="favorites-search-card__action">
+                            <el-tooltip
+                                v-if="showDangerUnfavorite"
+                                placement="top"
+                                :content="t('view.favorite.unfavorite_tooltip')">
+                                <el-button
+                                    size="small"
+                                    :icon="Close"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    type="danger"
+                                    @click.stop="handleDeleteFavorite" />
+                            </el-tooltip>
+                            <el-tooltip v-else placement="top" :content="t('view.favorite.edit_favorite_tooltip')">
+                                <el-button
+                                    type="default"
+                                    :icon="Star"
+                                    size="small"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    @click.stop="showFavoriteDialog('world', favorite.id)" />
+                            </el-tooltip>
+                        </div>
                     </div>
                 </template>
             </div>
@@ -98,12 +123,12 @@
 </template>
 
 <script setup>
-    import { Message } from '@element-plus/icons-vue';
+    import { Close, Message, Star } from '@element-plus/icons-vue';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { useFavoriteStore, useInviteStore } from '../../../stores';
+    import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
     import { favoriteRequest } from '../../../api';
 
     import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
@@ -118,15 +143,21 @@
 
     const emit = defineEmits(['toggle-select', 'remove-local-world-favorite', 'click']);
     const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
+    const { showFavoriteDialog } = useFavoriteStore();
     const { newInstanceSelfInvite } = useInviteStore();
     const { t } = useI18n();
     const { canOpenInstanceInGame } = useInviteStore();
+    const { shiftHeld } = storeToRefs(useUiStore());
 
     const isSelected = computed({
         get: () => props.selected,
         set: (value) => emit('toggle-select', value)
     });
 
+    const showDangerUnfavorite = computed(() => {
+        return shiftHeld.value;
+    });
+
     const cardClasses = computed(() => [
         'favorites-search-card',
         'favorites-search-card--world',

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -44,15 +44,40 @@
                     </div>
                 </template>
                 <template v-else>
-                    <div class="favorites-search-card__action">
+                    <div class="favorites-search-card__action-group">
-                        <el-tooltip placement="top" :content="inviteOrLaunchText">
+                        <div class="favorites-search-card__action">
-                            <el-button
+                            <el-tooltip placement="top" :content="inviteOrLaunchText">
-                                size="small"
+                                <el-button
-                                :icon="Message"
+                                    size="small"
-                                class="favorites-search-card__action-btn"
+                                    :icon="Message"
-                                @click.stop="newInstanceSelfInvite(favorite.id)"
+                                    class="favorites-search-card__action-btn"
-                                circle />
+                                    @click.stop="newInstanceSelfInvite(favorite.id)"
-                        </el-tooltip>
+                                    circle />
+                            </el-tooltip>
+                        </div>
+                        <div class="favorites-search-card__action">
+                            <el-tooltip
+                                v-if="showDangerUnfavorite"
+                                placement="top"
+                                :content="t('view.favorite.unfavorite_tooltip')">
+                                <el-button
+                                    size="small"
+                                    :icon="Close"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    type="danger"
+                                    @click.stop="handleDeleteFavorite" />
+                            </el-tooltip>
+                            <el-tooltip v-else placement="top" :content="t('view.favorite.edit_favorite_tooltip')">
+                                <el-button
+                                    type="default"
+                                    :icon="Star"
+                                    size="small"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    @click.stop="showFavoriteDialog('world', favorite.id)" />
+                            </el-tooltip>
+                        </div>
                     </div>
                 </template>
             </div>
@@ -76,7 +101,7 @@
 </template>
 
 <script setup>
-    import { Message } from '@element-plus/icons-vue';
+    import { Close, Message, Star } from '@element-plus/icons-vue';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -120,6 +145,10 @@
             : t('dialog.world.actions.new_instance_and_self_invite');
     });
 
+    const showDangerUnfavorite = computed(() => {
+        return shiftHeld.value;
+    });
+
     function handlePrimaryDeleteAction() {
         if (shiftHeld.value) {
             emit('remove-local-world-favorite', props.favorite.id, props.group);