Non modpack wireup & Project to profile install (#90)

* Base impl

* Make project type selectable

* Update Browse.vue

* address changes

* Quick create

* Run linter

* fix merge

* Addressed changes

* Installation improvements

* Run lint

* resourcepacks

* automatic installation of dependencies

* Fix bugs with search

* Addressed changes

* Run linter

* Fixed direct install not working

* Remove back to search

* Update Index.vue

* Addressed some changes

* Shader fix

* fix resetting

* Update Browse.vue

* fixed install not working properly

* Update Index.vue

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>

theseus_gui/src/pages/instance/Index.vue

@@ -47,12 +47,16 @@ import { get, run } from '@/helpers/profile'
 import { useRoute } from 'vue-router'
 import { shallowRef } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { useSearch } from '@/store/search'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
+const route = useRoute()
+const searchStore = useSearch()
 const breadcrumbs = useBreadcrumbs()
 
-const route = useRoute()
 const instance = shallowRef(await get(route.params.id))
+searchStore.instanceContext = instance.value
+
 breadcrumbs.setName('Instance', instance.value.metadata.name)
 breadcrumbs.setContext({
   name: instance.value.metadata.name,
@@ -66,7 +70,7 @@ breadcrumbs.setContext({
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  width: 15rem;
+  width: 17rem;
 }
 
 Button {
@@ -117,7 +121,7 @@ Button {
 }
 
 .content {
-  margin-left: 18rem;
+  margin-left: 20rem;
 }
 
 .instance-info {

theseus_gui/src/pages/instance/Mods.vue

@@ -3,11 +3,11 @@
     <div class="card-row">
       <div class="iconified-input">
         <SearchIcon />
-        <input v-model="searchFilter" type="text" placeholder="Search Mods" />
+        <input v-model="searchFilter" type="text" placeholder="Search Mods" class="text-input" />
       </div>
       <span class="manage">
         <span class="text-combo">
-          Sort By
+          <span class="no-wrap sort"> Sort By </span>
           <DropdownSelect
             v-model="sortFilter"
             name="sort-by"
@@ -16,9 +16,9 @@
             class="dropdown"
           />
         </span>
-        <Button color="primary">
+        <Button color="primary" @click="searchMod()">
           <PlusIcon />
-          Add Mods
+          <span class="no-wrap"> Add Content </span>
         </Button>
       </span>
     </div>
@@ -40,7 +40,7 @@
             <UpdatedIcon />
           </Button>
           <Button v-else disabled icon-only>
-            <CheckCircleIcon />
+            <CheckIcon />
           </Button>
         </div>
         <div class="table-cell table-text name-cell">
@@ -77,13 +77,17 @@ import {
   TrashIcon,
   PlusIcon,
   Card,
-  CheckCircleIcon,
+  CheckIcon,
   SearchIcon,
   UpdatedIcon,
   DropdownSelect,
 } from 'omorphia'
 import { computed, ref, shallowRef } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
 
 const props = defineProps({
   instance: {
@@ -142,7 +146,7 @@ const search = computed(() => {
   return updateSort(filtered, sortFilter.value)
 })
 
-function updateSort(projects, sort) {
+const updateSort = (projects, sort) => {
   switch (sort) {
     case 'Version':
       return projects.slice().sort((a, b) => {
@@ -176,9 +180,17 @@ function updateSort(projects, sort) {
       })
   }
 }
+
+const searchMod = () => {
+  router.push({ path: '/browse/mod', query: { instance: route.params.id } })
+}
 </script>
 
 <style scoped lang="scss">
+.text-input {
+  width: 100%;
+}
+
 .manage {
   display: flex;
   gap: 0.5rem;
@@ -219,4 +231,14 @@ function updateSort(projects, sort) {
 .dropdown {
   width: 7rem !important;
 }
+
+.no-wrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.sort {
+    padding-left: 0.5rem;
+  }
+}
 </style>