Backlog fixes (#141)

* Backlog fixes

* Clear searching

* slider units

* Run lint

* errant editing

* Toggle selected

* Update Mods.vue

* update disablers

* titlebar position

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

theseus_gui/src/components/GridDisplay.vue

@@ -189,6 +189,9 @@ const filteredResults = computed(() => {
     <div class="iconified-input">
       <SearchIcon />
       <input v-model="search" type="text" placeholder="Search" class="search-input" />
+      <Button @click="() => (search = '')">
+        <XIcon />
+      </Button>
     </div>
     <div class="labeled_button">
       <span>Sort by</span>

theseus_gui/src/components/ui/RunningAppBar.vue

@@ -1,9 +1,17 @@
 <template>
-  <div v-if="currentProcesses[0]" class="status">
+  <div v-if="selectedProfile" class="status">
     <span class="circle running" />
-    <span class="running-text">
-      {{ currentProcesses[0].metadata.name }}
-    </span>
+    <div
+      ref="profileButton"
+      class="running-text"
+      :class="{ clickable: currentProcesses.length > 1 }"
+      @click="toggleProfiles()"
+    >
+      {{ selectedProfile.metadata.name }}
+      <div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
+        <DropdownIcon />
+      </div>
+    </div>
     <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
       <StopCircleIcon />
     </Button>
@@ -44,10 +52,56 @@
       </div>
     </Card>
   </transition>
+  <transition name="download">
+    <Card v-if="showCard === true" ref="card" class="info-card">
+      <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+        <h3 class="info-title">
+          {{ loadingBar.bar_type.pack_name ?? 'Installing Modpack' }}
+        </h3>
+        <ProgressBar :progress="Math.floor(loadingBar.current)" />
+        <div class="row">{{ Math.floor(loadingBar.current) }}% {{ loadingBar.message }}</div>
+      </div>
+    </Card>
+  </transition>
+  <transition name="download">
+    <Card v-if="showProfiles === true" ref="profiles" class="profile-card">
+      <Button
+        v-for="profile in currentProcesses"
+        :key="profile.id"
+        class="profile-button"
+        @click="selectProfile(profile)"
+      >
+        <div class="text"><span class="circle running" /> {{ profile.metadata.name }}</div>
+        <Button
+          v-tooltip="'Stop instance'"
+          icon-only
+          class="icon-button stop"
+          @click.stop="stop(profile.path)"
+        >
+          <StopCircleIcon />
+        </Button>
+        <Button
+          v-tooltip="'View logs'"
+          icon-only
+          class="icon-button"
+          @click.stop="goToTerminal(profile.path)"
+        >
+          <TerminalSquareIcon />
+        </Button>
+      </Button>
+    </Card>
+  </transition>
 </template>
 
 <script setup>
-import { Button, DownloadIcon, Card, StopCircleIcon, TerminalSquareIcon } from 'omorphia'
+import {
+  Button,
+  DownloadIcon,
+  Card,
+  StopCircleIcon,
+  TerminalSquareIcon,
+  DropdownIcon,
+} from 'omorphia'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import {
   get_all_running_profiles as getRunningProfiles,
@@ -62,10 +116,14 @@ import { handleError } from '@/store/notifications.js'
 
 const router = useRouter()
 const card = ref(null)
+const profiles = ref(null)
 const infoButton = ref(null)
+const profileButton = ref(null)
 const showCard = ref(false)
+const showProfiles = ref(false)
 
 const currentProcesses = ref(await getRunningProfiles().catch(handleError))
+const selectedProfile = ref(currentProcesses.value[0])
 
 const unlistenProcess = await process_listener(async () => {
   await refresh()
@@ -73,11 +131,14 @@ const unlistenProcess = await process_listener(async () => {
 
 const refresh = async () => {
   currentProcesses.value = await getRunningProfiles().catch(handleError)
+  if (!currentProcesses.value.includes(selectedProfile.value)) {
+    selectedProfile.value = currentProcesses.value[0]
+  }
 }
 
-const stop = async () => {
+const stop = async (path) => {
   try {
-    const processes = await getProfileProcesses(currentProcesses.value[0].path)
+    const processes = await getProfileProcesses(path ?? selectedProfile.value.path)
     await killProfile(processes[0])
   } catch (e) {
     console.error(e)
@@ -85,8 +146,8 @@ const stop = async () => {
   await refresh()
 }
 
-const goToTerminal = () => {
-  router.push(`/instance/${encodeURIComponent(currentProcesses.value[0].path)}/logs`)
+const goToTerminal = (path) => {
+  router.push(`/instance/${encodeURIComponent(path ?? selectedProfile.value.path)}/logs`)
 }
 
 const currentLoadingBars = ref(Object.values(await progress_bars_list().catch(handleError)))
@@ -105,35 +166,70 @@ const refreshInfo = async () => {
   }
 }
 
-const handleClickOutside = (event) => {
+const selectProfile = (profile) => {
+  selectedProfile.value = profile
+  showProfiles.value = false
+}
+
+const handleClickOutsideCard = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
   if (
     card.value &&
-    infoButton.value.$el !== event.target &&
     card.value.$el !== event.target &&
-    !document.elementsFromPoint(event.clientX, event.clientY).includes(card.value.$el) &&
-    !document.elementsFromPoint(event.clientX, event.clientY).includes(infoButton.value.$el)
+    !elements.includes(card.value.$el) &&
+    !infoButton.value.contains(event.target)
   ) {
     showCard.value = false
   }
 }
 
+const handleClickOutsideProfile = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    profiles.value &&
+    profiles.value.$el !== event.target &&
+    !elements.includes(profiles.value.$el) &&
+    !profileButton.value.contains(event.target)
+  ) {
+    showProfiles.value = false
+  }
+}
+
 const toggleCard = async () => {
   showCard.value = !showCard.value
+  showProfiles.value = false
   await refreshInfo()
 }
 
+const toggleProfiles = async () => {
+  if (currentProcesses.value.length === 1) return
+  showProfiles.value = !showProfiles.value
+  showCard.value = false
+}
+
 onMounted(() => {
-  window.addEventListener('click', handleClickOutside)
+  window.addEventListener('click', handleClickOutsideCard)
+  window.addEventListener('click', handleClickOutsideProfile)
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('click', handleClickOutsideCard)
+  window.removeEventListener('click', handleClickOutsideProfile)
   unlistenProcess()
   unlistenLoading()
 })
 </script>
 
 <style scoped lang="scss">
+.arrow {
+  transition: transform 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  &.rotate {
+    transform: rotate(180deg);
+  }
+}
+
 .status {
   height: 100%;
   display: flex;
@@ -146,8 +242,18 @@ onBeforeUnmount(() => {
 }
 
 .running-text {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-xs);
   white-space: nowrap;
   overflow: hidden;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none;
+
+  &.clickable:hover {
+    cursor: pointer;
+  }
 }
 
 .circle {
@@ -266,4 +372,37 @@ onBeforeUnmount(() => {
 .info-title {
   margin: 0;
 }
+
+.profile-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: none;
+
+  .text {
+    margin-right: auto;
+  }
+}
+
+.profile-card {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
+  padding: var(--gap-md);
+
+  &.hidden {
+    transform: translateY(-100%);
+  }
+}
 </style>

theseus_gui/src/pages/Browse.vue

@@ -14,6 +14,7 @@ import {
   formatCategoryHeader,
   formatCategory,
   Promotion,
+  XIcon,
   DropdownSelect,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
@@ -630,6 +631,9 @@ const showLoaders = computed(
             :placeholder="`Search ${projectType}s...`"
             @input="onSearchChange(1)"
           />
+          <Button @click="() => (searchStore.searchInput = '')">
+            <XIcon />
+          </Button>
         </div>
         <div class="inline-option">
           <span>Sort by</span>

theseus_gui/src/pages/Settings.vue

@@ -209,6 +209,7 @@ watch(
           :min="256"
           :max="maxMemory"
           :step="1"
+          unit="mb"
         />
       </div>
     </Card>

theseus_gui/src/pages/instance/Mods.vue

@@ -13,6 +13,9 @@
           class="text-input"
           autocomplete="off"
         />
+        <Button @click="() => (searchFilter = '')">
+          <XIcon />
+        </Button>
       </div>
       <span class="manage">
         <span class="text-combo">
@@ -39,22 +42,63 @@
         </Button>
       </span>
     </div>
-    <Chips
-      v-if="Object.keys(selectableProjectTypes).length > 1"
-      v-model="selectedProjectType"
-      :items="Object.keys(selectableProjectTypes)"
-    />
+    <div class="second-row">
+      <Chips
+        v-if="Object.keys(selectableProjectTypes).length > 1"
+        v-model="selectedProjectType"
+        :items="Object.keys(selectableProjectTypes)"
+      />
+      <Button :disabled="!projects.some((x) => x.outdated)" class="no-wrap" @click="updateAll">
+        <UpdatedIcon />
+        Update {{ selected.length > 0 ? 'selected' : 'all' }}
+      </Button>
+      <Button v-if="selected.length > 0" class="no-wrap" @click="deleteWarning.show()">
+        <TrashIcon />
+        Remove selected
+      </Button>
+      <DropdownButton
+        v-if="selected.length > 0"
+        :options="['toggle', 'disable', 'enable']"
+        default-value="toggle"
+        @option-click="toggleSelected"
+      >
+        <template #toggle>
+          <GlobeIcon />
+          Toggle selected
+        </template>
+        <template #disable>
+          <EditIcon />
+          Disable selected
+        </template>
+        <template #enable>
+          <HashIcon />
+          Enable selected
+        </template>
+      </DropdownButton>
+      <DropdownButton
+        v-if="selected.length > 0"
+        :options="['copy_name', 'copy_url', 'copy_slug']"
+        default-value="copy_name"
+        @option-click="copySelected"
+      >
+        <template #copy_name>
+          <EditIcon />
+          Copy names
+        </template>
+        <template #copy_slug>
+          <HashIcon />
+          Copy slugs
+        </template>
+        <template #copy_url>
+          <GlobeIcon />
+          Copy URLs
+        </template>
+      </DropdownButton>
+    </div>
     <div class="table">
       <div class="table-row table-head">
         <div class="table-cell table-text">
-          <Button
-            v-tooltip="'Update all projects'"
-            icon-only
-            :disabled="!projects.some((x) => x.outdated)"
-            @click="updateAll"
-          >
-            <UpdatedIcon />
-          </Button>
+          <Checkbox v-model="selectAll" class="select-checkbox" />
         </div>
         <div class="table-cell table-text name-cell">Name</div>
         <div class="table-cell table-text">Version</div>
@@ -68,17 +112,7 @@
         @contextmenu.prevent.stop="(c) => handleRightClick(c, mod)"
       >
         <div class="table-cell table-text">
-          <AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator"></AnimatedLogo>
-          <Button
-            v-else
-            v-tooltip="'Update project'"
-            :disabled="!mod.outdated"
-            icon-only
-            @click="updateProject(mod)"
-          >
-            <UpdatedIcon v-if="mod.outdated" />
-            <CheckIcon v-else />
-          </Button>
+          <Checkbox v-model="mod.selected" class="select-checkbox" />
         </div>
         <div class="table-cell table-text name-cell">
           <router-link
@@ -100,6 +134,17 @@
           <Button v-tooltip="'Remove project'" icon-only @click="removeMod(mod)">
             <TrashIcon />
           </Button>
+          <AnimatedLogo v-if="mod.updating" class="btn icon-only updating-indicator"></AnimatedLogo>
+          <Button
+            v-else
+            v-tooltip="'Update project'"
+            :disabled="!mod.outdated"
+            icon-only
+            @click="updateProject(mod)"
+          >
+            <UpdatedIcon v-if="mod.outdated" />
+            <CheckIcon v-else />
+          </Button>
           <input
             id="switch-1"
             autocomplete="off"
@@ -112,6 +157,25 @@
       </div>
     </div>
   </Card>
+  <Modal ref="deleteWarning" header="Are you sure?">
+    <div class="modal-body">
+      <div class="markdown-body">
+        <p>
+          Are you sure you want to remove <strong>{{ selected.length }} projects</strong> from
+          {{ instance.metadata.name }}?
+          <br />
+          This action <strong>cannot</strong> be undone.
+        </p>
+      </div>
+      <div class="button-group push-right">
+        <Button @click="deleteWarning.hide()"> Cancel </Button>
+        <Button color="danger" @click="deleteSelected">
+          <TrashIcon />
+          Remove
+        </Button>
+      </div>
+    </div>
+  </Modal>
 </template>
 <script setup>
 import {
@@ -126,9 +190,16 @@ import {
   DropdownSelect,
   AnimatedLogo,
   Chips,
+  Checkbox,
   formatProjectType,
+  DropdownButton,
+  EditIcon,
+  GlobeIcon,
+  HashIcon,
+  Modal,
+  XIcon,
 } from 'omorphia'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { useRouter } from 'vue-router'
 import {
@@ -201,8 +272,11 @@ for (const [path, project] of Object.entries(props.instance.projects)) {
 }
 
 const searchFilter = ref('')
+const selectAll = ref(false)
 const sortFilter = ref('')
 const selectedProjectType = ref('All')
+const selected = computed(() => projects.value.filter((mod) => mod.selected))
+const deleteWarning = ref(null)
 
 const selectableProjectTypes = computed(() => {
   const obj = { All: 'all' }
@@ -274,7 +348,7 @@ function updateSort(projects, sort) {
 
 async function updateAll() {
   const setProjects = []
-  for (const [i, project] of projects.value.entries()) {
+  for (const [i, project] of selected.value ?? projects.value.entries()) {
     if (project.outdated) {
       project.updating = true
       setProjects.push(i)
@@ -318,6 +392,68 @@ async function removeMod(mod) {
   projects.value = projects.value.filter((x) => mod.path !== x.path)
 }
 
+async function deleteSelected() {
+  for (const project of selected.value) {
+    await remove_project(props.instance.path, project.path).catch(handleError)
+  }
+  projects.value = projects.value.filter((x) => !x.selected)
+  deleteWarning.value.hide()
+}
+
+async function copySelected(args) {
+  switch (args.option) {
+    case 'copy_name':
+      await navigator.clipboard.writeText(selected.value.map((x) => x.name).join('\n'))
+      break
+    case 'copy_slug':
+      await navigator.clipboard.writeText(
+        selected.value
+          .filter((x) => x.slug)
+          .map((x) => x.slug)
+          .join('\n')
+      )
+      break
+    case 'copy_url':
+      await navigator.clipboard.writeText(
+        selected.value
+          .filter((x) => x.slug)
+          .map((x) => `https://modrinth.com/${x.project_type}/${x.slug}`)
+          .join('\n')
+      )
+      break
+  }
+}
+
+async function toggleSelected(args) {
+  switch (args.option) {
+    case 'toggle':
+      for (const project of selected.value) {
+        await toggleDisableMod(project)
+      }
+      break
+    case 'enable':
+      for (const project of selected.value) {
+        if (project.disabled) {
+          await toggleDisableMod(project)
+        }
+      }
+      break
+    case 'disable':
+      for (const project of selected.value) {
+        if (!project.disabled) {
+          await toggleDisableMod(project)
+        }
+      }
+      break
+  }
+}
+
+watch(selectAll, () => {
+  for (const project of projects.value) {
+    project.selected = selectAll.value
+  }
+})
+
 const handleRightClick = (event, mod) => {
   if (mod.slug && mod.project_type) {
     props.options.showMenu(
@@ -346,7 +482,7 @@ const handleRightClick = (event, mod) => {
 }
 
 .table-row {
-  grid-template-columns: min-content 2fr 1fr 1fr 8rem;
+  grid-template-columns: min-content 2fr 1fr 1fr 11rem;
 }
 
 .table-cell {
@@ -384,6 +520,34 @@ const handleRightClick = (event, mod) => {
 .sort {
   padding-left: 0.5rem;
 }
+
+.second-row {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+
+  .chips {
+    flex-grow: 1;
+  }
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: var(--gap-lg);
+
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+
+  strong {
+    color: var(--color-contrast);
+  }
+}
 </style>
 <style lang="scss">
 .updating-indicator {
@@ -395,4 +559,10 @@ const handleRightClick = (event, mod) => {
 .v-popper--theme-tooltip .v-popper__inner {
   background: #fff !important;
 }
+
+.select-checkbox {
+  button.checkbox {
+    border: none;
+  }
+}
 </style>

theseus_gui/src/pages/instance/Options.vue

@@ -167,6 +167,7 @@
         :min="256"
         :max="maxMemory"
         :step="1"
+        unit="mb"
       />
     </div>
   </Card>