Search fixes (#134)

* Search fixes

* Fix small instance ui

* fix javaw issue

* menu fix

* Add confirm modal for deletion

* fix build

theseus_gui/src/components/ui/AccountsCard.vue

@@ -25,7 +25,7 @@
           <p>Selected</p>
         </div>
         <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.id)">
-          <XIcon />
+          <TrashIcon />
         </Button>
       </div>
       <div v-else class="logged-out account">
@@ -41,7 +41,7 @@
             <p>{{ account.username }}</p>
           </Button>
           <Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
-            <XIcon />
+            <TrashIcon />
           </Button>
         </div>
       </div>
@@ -54,7 +54,7 @@
 </template>
 
 <script setup>
-import { Avatar, Button, Card, PlusIcon, XIcon, UsersIcon, LogInIcon } from 'omorphia'
+import { Avatar, Button, Card, PlusIcon, TrashIcon, UsersIcon, LogInIcon } from 'omorphia'
 import { ref, defineProps, computed, onMounted, onBeforeUnmount } from 'vue'
 import {
   users,

theseus_gui/src/components/ui/Breadcrumbs.vue

@@ -3,7 +3,10 @@
     <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
       <router-link
         v-if="breadcrumb.link"
-        :to="breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id))"
+        :to="{
+          path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
+          query: breadcrumb.query,
+        }"
         >{{
           breadcrumb.name.charAt(0) === '?'
             ? breadcrumbData.getName(breadcrumb.name.slice(1))

theseus_gui/src/components/ui/Instance.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { onUnmounted, ref, useSlots, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Card, DownloadIcon, StopCircleIcon, Avatar, AnimatedLogo, PlayIcon } from 'omorphia'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import { install as pack_install } from '@/helpers/pack'
-import { get, list, remove, run } from '@/helpers/profile'
+import { list, remove, run } from '@/helpers/profile'
 import {
   get_all_running_profile_paths,
   get_uuids_by_profile_path,
@@ -13,12 +13,10 @@ import {
 } from '@/helpers/process'
 import { process_listener } from '@/helpers/events'
 import { useFetch } from '@/helpers/fetch.js'
-import { handleError, useSearch } from '@/store/state.js'
+import { handleError } from '@/store/state.js'
 import { showInFolder } from '@/helpers/utils.js'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 
-const searchStore = useSearch()
-
 const props = defineProps({
   instance: {
     type: Object,
@@ -26,10 +24,6 @@ const props = defineProps({
       return {}
     },
   },
-  small: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 const confirmModal = ref(null)
@@ -41,13 +35,14 @@ const modLoading = ref(
   props.instance.install_stage ? props.instance.install_stage !== 'installed' : false
 )
 
-watch(props.instance, () => {
-  modLoading.value = props.instance.install_stage
-    ? props.instance.install_stage !== 'installed'
-    : false
-})
-
-const slots = useSlots()
+watch(
+  () => props.instance,
+  () => {
+    modLoading.value = props.instance.install_stage
+      ? props.instance.install_stage !== 'installed'
+      : false
+  }
+)
 
 const router = useRouter()
 
@@ -143,8 +138,10 @@ const openFolder = async () => {
 }
 
 const addContent = async () => {
-  searchStore.instanceContext = await get(props.instance.path).catch(handleError)
-  await router.push({ path: '/browse/mod' })
+  await router.push({
+    path: `/browse/${props.instance.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+    query: { i: props.instance.path },
+  })
 }
 
 defineExpose({
@@ -168,41 +165,7 @@ onUnmounted(() => unlisten())
 
 <template>
   <div class="instance">
-    <Card v-if="props.small" class="instance-small-card" :class="{ 'button-base': !slots.content }">
-      <div
-        class="instance-small-card__description"
-        :class="{ 'button-base': slots.content }"
-        @click="seeInstance"
-      >
-        <Avatar
-          :src="
-            !props.instance.metadata.icon ||
-            (props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
-              ? props.instance.metadata.icon
-              : convertFileSrc(instance.metadata?.icon)
-          "
-          :alt="props.instance.metadata.name"
-          size="sm"
-        />
-        <div class="instance-small-card__info">
-          <span class="title">{{ props.instance.metadata.name }}</span>
-          {{
-            props.instance.metadata.loader.charAt(0).toUpperCase() +
-            props.instance.metadata.loader.slice(1)
-          }}
-          {{ props.instance.metadata.game_version }}
-        </div>
-      </div>
-      <div v-if="slots.content" class="instance-small-card__content">
-        <slot name="content" />
-      </div>
-    </Card>
-    <Card
-      v-else
-      class="instance-card-item button-base"
-      @click="seeInstance"
-      @mouseenter="checkProcess"
-    >
+    <Card class="instance-card-item button-base" @click="seeInstance" @mouseenter="checkProcess">
       <Avatar
         size="sm"
         :src="
@@ -210,7 +173,7 @@ onUnmounted(() => unlisten())
             ? !props.instance.metadata.icon ||
               (props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
               ? props.instance.metadata.icon
-              : convertFileSrc(instance.metadata?.icon)
+              : convertFileSrc(props.instance.metadata?.icon)
             : props.instance.icon_url
         "
         alt="Mod card"
@@ -224,27 +187,25 @@ onUnmounted(() => unlisten())
         </p>
       </div>
     </Card>
-    <template v-if="!props.small">
-      <div
-        v-if="props.instance.metadata && playing === false && modLoading === false"
-        class="install cta button-base"
-        @click="play"
-      >
-        <PlayIcon />
-      </div>
-      <div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
-        <AnimatedLogo class="loading-indicator" />
-      </div>
-      <div
-        v-else-if="playing === true"
-        class="stop cta button-base"
-        @click="stop"
-        @mousehover="checkProcess"
-      >
-        <StopCircleIcon />
-      </div>
-      <div v-else class="install cta button-base" @click="install"><DownloadIcon /></div>
-    </template>
+    <div
+      v-if="props.instance.metadata && playing === false && modLoading === false"
+      class="install cta button-base"
+      @click="play"
+    >
+      <PlayIcon />
+    </div>
+    <div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
+      <AnimatedLogo class="loading-indicator" />
+    </div>
+    <div
+      v-else-if="playing === true"
+      class="stop cta button-base"
+      @click="stop"
+      @mousehover="checkProcess"
+    >
+      <StopCircleIcon />
+    </div>
+    <div v-else class="install cta button-base" @click="install"><DownloadIcon /></div>
     <InstallConfirmModal ref="confirmModal" />
     <InstanceInstallModal ref="modInstallModal" />
   </div>
@@ -263,58 +224,13 @@ onUnmounted(() => unlisten())
 </style>
 
 <style lang="scss" scoped>
-.instance-small-card {
-  background-color: var(--color-bg) !important;
-  display: flex;
-  flex-direction: column;
-  min-height: min-content !important;
-  gap: 0.5rem;
-  align-items: flex-start;
-  padding: 0;
-
-  .instance-small-card__description {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    gap: 1rem;
-    flex-grow: 1;
-    padding: var(--gap-xl);
-    padding-bottom: 0;
-    width: 100%;
-
-    &:not(.button-base) {
-      padding-bottom: var(--gap-xl);
-    }
-  }
-
-  .instance-small-card__info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .title {
-      color: var(--color-contrast);
-      font-weight: bolder;
-    }
-  }
-
-  .instance-small-card__content {
-    padding: var(--gap-xl);
-    padding-top: 0;
-  }
-
-  .cta {
-    display: none;
-  }
-}
-
 .instance {
   position: relative;
 
   &:hover {
     .cta {
       opacity: 1;
-      bottom: 5.5rem;
+      bottom: 4.75rem;
     }
 
     .instance-card-item {
@@ -329,9 +245,7 @@ onUnmounted(() => unlisten())
       background: hsl(0, 0%, 91%) !important;
     }
   }
-}
 
-.light-mode {
   .instance-card-item {
     background: hsl(0, 0%, 100%) !important;
 
@@ -351,7 +265,7 @@ onUnmounted(() => unlisten())
   width: 3rem;
   height: 3rem;
   right: 1.25rem;
-  bottom: 5rem;
+  bottom: 4.25rem;
   opacity: 0;
   transition: 0.2s ease-in-out bottom, 0.1s ease-in-out opacity, 0.1s ease-in-out filter !important;
   cursor: pointer;

theseus_gui/src/components/ui/JavaDetectionModal.vue

@@ -52,14 +52,12 @@ const currentSelected = ref({})
 defineExpose({
   show: async (version, currentSelectedJava) => {
     if (version <= 8 && !!version) {
-      console.log(version)
       chosenInstallOptions.value = await find_jre_8_jres().catch(handleError)
     } else if (version >= 18) {
       chosenInstallOptions.value = await find_jre_18plus_jres().catch(handleError)
     } else if (version) {
       chosenInstallOptions.value = await find_jre_17_jres().catch(handleError)
     } else {
-      console.log('get all')
       chosenInstallOptions.value = await get_all_jre().catch(handleError)
     }
 

theseus_gui/src/components/ui/RunningAppBar.vue

@@ -67,7 +67,7 @@ const showCard = ref(false)
 
 const currentProcesses = ref(await getRunningProfiles().catch(handleError))
 
-await process_listener(async () => {
+const unlistenProcess = await process_listener(async () => {
   await refresh()
 })
 
@@ -91,7 +91,7 @@ const goToTerminal = () => {
 
 const currentLoadingBars = ref(Object.values(await progress_bars_list().catch(handleError)))
 
-await loading_listener(async () => {
+const unlistenLoading = await loading_listener(async () => {
   await refreshInfo()
 })
 
@@ -128,6 +128,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('click', handleClickOutside)
+  unlistenProcess()
+  unlistenLoading()
 })
 </script>
 

theseus_gui/src/components/ui/SearchCard.vue

@@ -1,5 +1,13 @@
 <template>
-  <Card class="card button-base" @click="$router.push(`/project/${project.project_id}/`)">
+  <Card
+    class="card button-base"
+    @click="
+      $router.push({
+        path: `/project/${project.project_id}/`,
+        query: { i: props.instance ? props.instance.path : undefined },
+      })
+    "
+  >
     <div class="icon">
       <Avatar :src="project.icon_url" size="md" class="search-icon" />
     </div>
@@ -117,14 +125,7 @@ const props = defineProps({
 })
 
 const installing = ref(false)
-
-const installed = ref(
-  props.instance
-    ? Object.values(props.instance.projects).some(
-        (p) => p.metadata?.project?.id === props.project.project_id
-      )
-    : false
-)
+const installed = ref(props.project.installed)
 
 async function install() {
   installing.value = true