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/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;