From abb02ad6249931d5cf36df64d846ec4617efc465 Mon Sep 17 00:00:00 2001
From: chaos <72168435+qtchaos@users.noreply.github.com>
Date: Sat, 19 Aug 2023 04:30:07 +0300
Subject: [PATCH] Fix being able to add mods to paired instances (#630)

* Fix being able to add mods to paired instances

* Remove debugging output.
---
 theseus_gui/src/components/ui/ContextMenu.vue |  15 +-
 .../src/components/ui/ModInstallModal.vue     |  31 +++-
 theseus_gui/src/pages/instance/Mods.vue       | 161 +++++++++---------
 3 files changed, 119 insertions(+), 88 deletions(-)

diff --git a/theseus_gui/src/components/ui/ContextMenu.vue b/theseus_gui/src/components/ui/ContextMenu.vue
index 94b5c2803..cd4d442cc 100644
--- a/theseus_gui/src/components/ui/ContextMenu.vue
+++ b/theseus_gui/src/components/ui/ContextMenu.vue
@@ -11,7 +11,11 @@
     >
       <div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
         <hr v-if="option.type === 'divider'" class="divider" />
-        <div v-else class="item clickable" :class="[option.color ?? 'base']">
+        <div
+          v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
+          class="item clickable"
+          :class="[option.color ?? 'base']"
+        >
           <slot :name="option.name" />
         </div>
       </div>
@@ -55,6 +59,15 @@ defineExpose({
   },
 })
 
+const isLinkedData = (item) => {
+  if (item.instance != undefined && item.instance.metadata.linked_data) {
+    return true
+  } else if (item.metadata != undefined && item.metadata.linked_data) {
+    return true
+  }
+  return false
+}
+
 const hideContextMenu = () => {
   shown.value = false
   emit('menu-closed')
diff --git a/theseus_gui/src/components/ui/ModInstallModal.vue b/theseus_gui/src/components/ui/ModInstallModal.vue
index a9149dc56..0e570cc09 100644
--- a/theseus_gui/src/components/ui/ModInstallModal.vue
+++ b/theseus_gui/src/components/ui/ModInstallModal.vue
@@ -245,13 +245,30 @@ const check_valid = computed(() => {
             />
             {{ profile.metadata.name }}
           </Button>
-          <Button :disabled="profile.installedMod || profile.installing" @click="install(profile)">
-            <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
-            <CheckIcon v-else-if="profile.installedMod" />
-            {{
-              profile.installing ? 'Installing...' : profile.installedMod ? 'Installed' : 'Install'
-            }}
-          </Button>
+          <div
+            v-tooltip="
+              profile.metadata.linked_data && !profile.installedMod
+                ? 'Unpair an instance to add mods.'
+                : ''
+            "
+          >
+            <Button
+              :disabled="profile.installedMod || profile.installing || profile.metadata.linked_data"
+              @click="install(profile)"
+            >
+              <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+              <CheckIcon v-else-if="profile.installedMod" />
+              {{
+                profile.installing
+                  ? 'Installing...'
+                  : profile.installedMod
+                  ? 'Installed'
+                  : profile.metadata.linked_data
+                  ? 'Paired'
+                  : 'Install'
+              }}
+            </Button>
+          </div>
         </div>
       </div>
       <Card v-if="showCreation" class="creation-card">
diff --git a/theseus_gui/src/pages/instance/Mods.vue b/theseus_gui/src/pages/instance/Mods.vue
index da35d8700..3501fba2e 100644
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -65,14 +65,10 @@
     :link-function="(page) => `?page=${page}`"
     @switch-page="switchPage"
   />
-  <Card
-    v-if="projects.length > 0"
-    class="list-card"
-    :class="{ static: instance.metadata.linked_data }"
-  >
+  <Card v-if="projects.length > 0" class="list-card">
     <div class="table">
       <div class="table-row table-head" :class="{ 'show-options': selected.length > 0 }">
-        <div v-if="!instance.metadata.linked_data" class="table-cell table-text">
+        <div class="table-cell table-text">
           <Checkbox v-model="selectAll" class="select-checkbox" />
         </div>
         <div v-if="selected.length === 0" class="table-cell table-text name-cell actions-cell">
@@ -88,23 +84,21 @@
           </Button>
         </div>
         <div v-if="selected.length === 0" class="table-cell table-text actions-cell">
-          <Button
-            v-if="!instance.metadata.linked_data"
-            class="transparent"
-            @click="sortProjects('Enabled')"
-          >
+          <Button class="transparent" @click="sortProjects('Enabled')">
             Actions
             <DropdownIcon v-if="sortColumn === 'Enabled'" :class="{ down: ascending }" />
           </Button>
         </div>
-        <div v-else-if="!instance.metadata.linked_data" class="options table-cell name-cell">
-          <Button
-            class="transparent share"
-            @click="() => (showingOptions = !showingOptions)"
-            @mouseover="selectedOption = 'Share'"
-          >
-            <MenuIcon :class="{ open: showingOptions }" />
-          </Button>
+        <div v-else class="options table-cell name-cell">
+          <div>
+            <Button
+              class="transparent share"
+              @click="() => (showingOptions = !showingOptions)"
+              @mouseover="selectedOption = 'Share'"
+            >
+              <MenuIcon :class="{ open: showingOptions }" />
+            </Button>
+          </div>
           <Button
             class="transparent share"
             @click="shareNames()"
@@ -113,37 +107,42 @@
             <ShareIcon />
             Share
           </Button>
-          <Button
-            class="transparent trash"
-            @click="deleteWarning.show()"
-            @mouseover="selectedOption = 'Delete'"
-          >
-            <TrashIcon />
-            Delete
-          </Button>
-          <Button
-            class="transparent update"
-            :disabled="offline"
-            @click="updateAll()"
-            @mouseover="selectedOption = 'Update'"
-          >
-            <UpdatedIcon />
-            Update
-          </Button>
-          <Button
-            class="transparent"
-            @click="toggleSelected()"
-            @mouseover="selectedOption = 'Toggle'"
-          >
-            <ToggleIcon />
-            Toggle
-          </Button>
+          <div v-tooltip="isPackLinked ? 'Unpair this instance to remove mods' : ''">
+            <Button
+              :disabled="isPackLinked"
+              class="transparent trash"
+              @click="deleteWarning.show()"
+              @mouseover="selectedOption = 'Delete'"
+            >
+              <TrashIcon />
+              Delete
+            </Button>
+          </div>
+          <div v-tooltip="isPackLinked ? 'Unpair this instance to update mods' : ''">
+            <Button
+              :disabled="isPackLinked || offline"
+              class="transparent update"
+              @click="updateAll()"
+              @mouseover="selectedOption = 'Update'"
+            >
+              <UpdatedIcon />
+              Update
+            </Button>
+          </div>
+          <div v-tooltip="isPackLinked ? 'Unpair this instance to toggle mods' : ''">
+            <Button
+              :disabled="isPackLinked"
+              class="transparent"
+              @click="toggleSelected()"
+              @mouseover="selectedOption = 'Toggle'"
+            >
+              <ToggleIcon />
+              Toggle
+            </Button>
+          </div>
         </div>
       </div>
-      <div
-        v-if="showingOptions && selected.length > 0 && !instance.metadata.linked_data"
-        class="more-box"
-      >
+      <div v-if="showingOptions && selected.length > 0" class="more-box">
         <section v-if="selectedOption === 'Share'" class="options">
           <Button class="transparent" @click="shareNames()">
             <TextInputIcon />
@@ -204,7 +203,7 @@
         class="table-row"
         @contextmenu.prevent.stop="(c) => handleRightClick(c, mod)"
       >
-        <div v-if="!instance.metadata.linked_data" class="table-cell table-text checkbox">
+        <div class="table-cell table-text checkbox">
           <Checkbox
             :model-value="selectionMap.get(mod.path)"
             class="select-checkbox"
@@ -233,37 +232,39 @@
           <span v-tooltip="`${mod.version}`">{{ mod.version }}</span>
         </div>
         <div class="table-cell table-text manage">
-          <Button
-            v-if="!instance.metadata.linked_data"
-            v-tooltip="'Remove project'"
-            icon-only
-            @click="removeMod(mod)"
-          >
-            <TrashIcon />
-          </Button>
-          <AnimatedLogo
-            v-if="mod.updating && !instance.metadata.linked_data"
-            class="btn icon-only updating-indicator"
-          ></AnimatedLogo>
-          <Button
-            v-else-if="!instance.metadata.linked_data"
-            v-tooltip="'Update project'"
-            :disabled="!mod.outdated || offline"
-            icon-only
-            @click="updateProject(mod)"
-          >
-            <UpdatedIcon v-if="mod.outdated" />
-            <CheckIcon v-else />
-          </Button>
-          <input
-            v-if="!instance.metadata.linked_data"
-            id="switch-1"
-            autocomplete="off"
-            type="checkbox"
-            class="switch stylized-toggle"
-            :checked="!mod.disabled"
-            @change="toggleDisableMod(mod)"
-          />
+          <div v-tooltip="isPackLinked ? 'Unpair this instance to remove mods.' : ''">
+            <Button
+              v-tooltip="'Remove project'"
+              :disabled="isPackLinked"
+              icon-only
+              @click="removeMod(mod)"
+            >
+              <TrashIcon />
+            </Button>
+          </div>
+          <AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator"></AnimatedLogo>
+          <div v-tooltip="isPackLinked ? 'Unpair this instance to update mods.' : ''">
+            <Button
+              v-tooltip="'Update project'"
+              :disabled="!mod.outdated || offline || isPackLinked"
+              icon-only
+              @click="updateProject(mod)"
+            >
+              <UpdatedIcon v-if="mod.outdated" />
+              <CheckIcon v-else />
+            </Button>
+          </div>
+          <div v-tooltip="isPackLinked ? 'Unpair this instance to toggle mods.' : ''">
+            <input
+              id="switch-1"
+              :disabled="isPackLinked"
+              autocomplete="off"
+              type="checkbox"
+              class="switch stylized-toggle"
+              :checked="!mod.disabled"
+              @change="toggleDisableMod(mod)"
+            />
+          </div>
           <Button
             v-tooltip="`Show ${mod.file_name}`"
             icon-only