Fixes and enhancements (#350)

* Fixes #147

* Fixes #149 and #151

* Fixed #153

* Fixes #154

* Update ContextMenu.vue

* Revert temp change to test windows

* More bug fixes

* Fixed modpack install bug

* Fixes #314

* Lint

* Fix #261

theseus_gui/src/App.vue

@@ -29,7 +29,7 @@ import mixpanel from 'mixpanel-browser'
 import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
 import OnboardingModal from '@/components/OnboardingModal.vue'
 import { getVersion } from '@tauri-apps/api/app'
-import { window } from '@tauri-apps/api'
+import { window as TauriWindow } from '@tauri-apps/api'
 import { TauriEvent } from '@tauri-apps/api/event'
 import { await_sync, check_safe_loading_bars_complete } from './helpers/state'
 import { confirm } from '@tauri-apps/api/dialog'
@@ -93,10 +93,10 @@ const handleClose = async () => {
     }
   }
   await await_sync()
-  window.getCurrent().close()
+  await TauriWindow.getCurrent().close()
 }
 
-window.getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {
+TauriWindow.getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {
   await handleClose()
 })
 
@@ -136,8 +136,8 @@ document.querySelector('body').addEventListener('click', function (e) {
             path: target.href,
           },
         })
-        e.preventDefault()
       }
+      e.preventDefault()
       break
     }
     target = target.parentElement
@@ -153,24 +153,13 @@ const accounts = ref(null)
     <suspense>
       <OnboardingModal ref="testModal" :accounts="accounts" />
     </suspense>
-    <div class="nav-container" :class="{ expanded: !themeStore.collapsedNavigation }">
+    <div class="nav-container">
       <div class="nav-section">
         <suspense>
-          <AccountsCard
+          <AccountsCard ref="accounts" mode="small" />
-            ref="accounts"
-            :mode="themeStore.collapsedNavigation ? 'small' : 'expanded'"
-          />
         </suspense>
         <div class="pages-list">
-          <RouterLink
+          <RouterLink to="/" class="btn icon-only collapsed-button">
-            to="/"
-            class="btn"
-            :class="{
-              'icon-only': themeStore.collapsedNavigation,
-              'collapsed-button': themeStore.collapsedNavigation,
-              'expanded-button': !themeStore.collapsedNavigation,
-            }"
-          >
             <HomeIcon />
             <span v-if="!themeStore.collapsedNavigation">Home</span>
           </RouterLink>
@@ -232,15 +221,17 @@ const accounts = ref(null)
       </div>
     </div>
     <div class="view" :class="{ expanded: !themeStore.collapsedNavigation }">
-      <div data-tauri-drag-region class="appbar">
+      <div class="appbar-row">
-        <section class="navigation-controls">
+        <div data-tauri-drag-region class="appbar">
-          <Breadcrumbs data-tauri-drag-region />
+          <section class="navigation-controls">
-        </section>
+            <Breadcrumbs data-tauri-drag-region />
-        <section class="mod-stats">
+          </section>
-          <Suspense>
+          <section class="mod-stats">
-            <RunningAppBar data-tauri-drag-region />
+            <Suspense>
-          </Suspense>
+              <RunningAppBar data-tauri-drag-region />
-        </section>
+            </Suspense>
+          </section>
+        </div>
         <section class="window-controls">
           <Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
             <MinimizeIcon />
@@ -291,12 +282,16 @@ const accounts = ref(null)
   width: min-content;
 }
 
+.appbar-row {
+  display: flex;
+  flex-direction: row;
+}
+
 .window-controls {
   z-index: 20;
   display: none;
   flex-direction: row;
   align-items: center;
-  gap: 0.25rem;
 
   .titlebar-button {
     display: flex;
@@ -306,6 +301,8 @@ const accounts = ref(null)
     transition: all ease-in-out 0.1s;
     background-color: var(--color-raised-bg);
     color: var(--color-base);
+    border-radius: 0;
+    height: 3.25rem;
 
     &.close {
       &:hover,
@@ -342,6 +339,7 @@ const accounts = ref(null)
     .appbar {
       display: flex;
       align-items: center;
+      flex-grow: 1;
       background: var(--color-raised-bg);
       box-shadow: inset 0px -3px 0px black;
       text-align: center;

theseus_gui/src/assets/stylesheets/global.scss

@@ -47,13 +47,6 @@ input {
   border: none !important;
 }
 
-.mod-text {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  color: var(--color-contrast);
-}
-
 .badge {
   display: flex;
   border-radius: var(--radius-md);

theseus_gui/src/components/ui/ContextMenu.vue

@@ -127,16 +127,19 @@ onBeforeUnmount(() => {
       &.primary {
         background-color: var(--color-brand);
         color: var(--color-accent-contrast);
+        font-weight: bold;
       }
 
       &.danger {
         background-color: var(--color-red);
         color: var(--color-accent-contrast);
+        font-weight: bold;
       }
 
       &.contrast {
         background-color: var(--color-orange);
         color: var(--color-accent-contrast);
+        font-weight: bold;
       }
     }
   }

theseus_gui/src/components/ui/InstallConfirmModal.vue

@@ -4,6 +4,7 @@ import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
 import mixpanel from 'mixpanel-browser'
 import { useTheming } from '@/store/theme.js'
+import { handleError } from '@/store/state.js'
 
 const themeStore = useTheming()
 
@@ -15,11 +16,12 @@ const confirmModal = ref(null)
 const installing = ref(false)
 
 defineExpose({
-  show: (id, projectIdVal, projectTitle, projectIcon) => {
+  show: (projectIdVal, versionId, projectTitle, projectIcon) => {
-    version.value = id
     projectId.value = projectIdVal
+    version.value = versionId
     title.value = projectTitle
     icon.value = projectIcon
+    installing.value = false
     confirmModal.value.show()
 
     mixpanel.track('PackInstallStart')
@@ -28,7 +30,13 @@ defineExpose({
 
 async function install() {
   installing.value = true
-  await pack_install(projectId.value, version.value, title.value, icon.value ? icon.value : null)
+  console.log(`Installing ${projectId.value} ${version.value} ${title.value} ${icon.value}`)
+  await pack_install(
+    projectId.value,
+    version.value,
+    title.value,
+    icon.value ? icon.value : null
+  ).catch(handleError)
   confirmModal.value.hide()
 
   mixpanel.track('PackInstall', {

theseus_gui/src/components/ui/RunningAppBar.vue

@@ -11,14 +11,16 @@
     </Button>
     <div v-if="selectedProfile" class="status">
       <span class="circle running" />
-      <div
+      <div ref="profileButton" class="running-text">
-        ref="profileButton"
+        <router-link :to="`/instance/${encodeURIComponent(selectedProfile.path)}`">
-        class="running-text"
+          {{ selectedProfile.metadata.name }}
-        :class="{ clickable: currentProcesses.length > 1 }"
+        </router-link>
-        @click="toggleProfiles()"
+        <div
-      >
+          v-if="currentProcesses.length > 1"
-        {{ selectedProfile.metadata.name }}
+          class="arrow button-base"
-        <div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
+          :class="{ rotate: showProfiles }"
+          @click="toggleProfiles()"
+        >
           <DropdownIcon />
         </div>
       </div>
@@ -44,7 +46,7 @@
     </div>
   </div>
   <transition name="download">
-    <Card v-if="showCard === true" ref="card" class="info-card">
+    <Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
       <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
         <h3 class="info-title">
           {{ loadingBar.title }}
@@ -57,7 +59,11 @@
     </Card>
   </transition>
   <transition name="download">
-    <Card v-if="showProfiles === true" ref="profiles" class="profile-card">
+    <Card
+      v-if="showProfiles === true && currentProcesses.length > 0"
+      ref="profiles"
+      class="profile-card"
+    >
       <Button
         v-for="profile in currentProcesses"
         :key="profile.id"
@@ -193,6 +199,7 @@ const handleClickOutsideCard = (event) => {
     card.value &&
     card.value.$el !== event.target &&
     !elements.includes(card.value.$el) &&
+    infoButton.value &&
     !infoButton.value.contains(event.target)
   ) {
     showCard.value = false

theseus_gui/src/pages/Settings.vue

@@ -106,25 +106,6 @@ watch(
           "
         />
       </div>
-      <div class="adjacent-input">
-        <label for="collapsed-nav">
-          <span class="label__title">Collapsed navigation mode</span>
-          <span class="label__description"
-            >Change the style of the side navigation bar to a compact version.</span
-          >
-        </label>
-        <Toggle
-          id="collapsed-nav"
-          :model-value="themeStore.collapsedNavigation"
-          :checked="themeStore.collapsedNavigation"
-          @update:model-value="
-            (e) => {
-              themeStore.collapsedNavigation = e
-              settings.collapsed_navigation = themeStore.collapsedNavigation
-            }
-          "
-        />
-      </div>
       <div class="adjacent-input">
         <label for="advanced-rendering">
           <span class="label__title">Advanced rendering</span>

theseus_gui/src/pages/instance/Logs.vue

@@ -122,14 +122,14 @@ async function setLogs() {
 }
 
 const copyLog = () => {
-  if (logs.value[selectedLogIndex.value]) {
+  if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
     navigator.clipboard.writeText(logs.value[selectedLogIndex.value].stdout)
     copied.value = true
   }
 }
 
 const share = async () => {
-  if (logs.value[selectedLogIndex.value]) {
+  if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
     const url = await ofetch('https://api.mclo.gs/1/log', {
       method: 'POST',
       headers: {
@@ -146,7 +146,7 @@ watch(selectedLogIndex, async (newIndex) => {
   copied.value = false
   userScrolled.value = false
 
-  if (newIndex !== 0) {
+  if (logs.value.length > 1 && newIndex !== 0) {
     logs.value[newIndex].stdout = 'Loading...'
     logs.value[newIndex].stdout = await get_output_by_datetime(
       props.instance.uuid,

theseus_gui/src/pages/instance/Mods.vue

@@ -61,12 +61,6 @@
               <DropdownIcon v-if="sortColumn === 'Version'" :class="{ down: ascending }" />
             </Button>
           </div>
-          <div v-if="selected.length === 0" class="table-cell table-text">
-            <Button class="transparent" @click="sortProjects('Author')">
-              Author
-              <DropdownIcon v-if="sortColumn === 'Author'" :class="{ down: ascending }" />
-            </Button>
-          </div>
           <div v-if="selected.length === 0" class="table-cell table-text actions-cell">
             <Button class="transparent" @click="sortProjects('Enabled')">
               Actions
@@ -187,18 +181,22 @@
             <router-link
               v-if="mod.slug"
               :to="{ path: `/project/${mod.slug}/`, query: { i: props.instance.path } }"
-              class="mod-text"
+              class="mod-content"
             >
               <Avatar :src="mod.icon" />
-              {{ mod.name }}
+              <div v-tooltip="`${mod.name} by ${mod.author}`" class="mod-text">
+                <div class="title">{{ mod.name }}</div>
+                <span class="no-wrap">by {{ mod.author }}</span>
+              </div>
             </router-link>
-            <div v-else class="mod-text">
+            <div v-else class="mod-content">
               <Avatar :src="mod.icon" />
-              {{ mod.name }}
+              <span v-tooltip="`${mod.name}`" class="title">{{ mod.name }}</span>
             </div>
           </div>
-          <div class="table-cell table-text">{{ mod.version }}</div>
+          <div class="table-cell table-text">
-          <div class="table-cell table-text">{{ mod.author }}</div>
+            <span v-tooltip="`${mod.version}`">{{ mod.version }}</span>
+          </div>
           <div class="table-cell table-text manage">
             <Button v-tooltip="'Remove project'" icon-only @click="removeMod(mod)">
               <TrashIcon />
@@ -225,6 +223,9 @@
               :checked="!mod.disabled"
               @change="toggleDisableMod(mod)"
             />
+            <Button v-tooltip="`Show ${mod.file_name}`" icon-only @click="showInFolder(mod.path)">
+              <FolderOpenIcon />
+            </Button>
           </div>
         </div>
       </div>
@@ -344,6 +345,7 @@ import { handleError } from '@/store/notifications.js'
 import mixpanel from 'mixpanel-browser'
 import { open } from '@tauri-apps/api/dialog'
 import { listen } from '@tauri-apps/api/event'
+import { showInFolder } from '@/helpers/utils.js'
 import { MenuIcon, ToggleIcon, TextInputIcon, AddProjectImage } from '@/assets/icons'
 
 const router = useRouter()
@@ -765,7 +767,7 @@ listen('tauri://file-drop', async (event) => {
 }
 
 .table-row {
-  grid-template-columns: min-content 2fr 1fr 1fr 11rem;
+  grid-template-columns: min-content 2fr 1fr 13.25rem;
 
   &.show-options {
     grid-template-columns: min-content auto;
@@ -807,6 +809,11 @@ listen('tauri://file-drop', async (event) => {
 
 .name-cell {
   padding-left: 0;
+
+  .btn {
+    margin-left: var(--gap-sm);
+    min-width: unset;
+  }
 }
 
 .dropdown {
@@ -845,6 +852,22 @@ listen('tauri://file-drop', async (event) => {
   }
 }
 
+.mod-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  .mod-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .title {
+    color: var(--color-contrast);
+    font-weight: bolder;
+  }
+}
+
 .actions-cell {
   display: flex;
   align-items: center;

theseus_gui/src/pages/project/Index.vue

@@ -345,7 +345,9 @@ const markInstalled = () => {
 async function install(version) {
   installing.value = true
   let queuedVersionData
-  instance.value = await getInstance(instance.value.path, false).catch(handleError)
+  if (instance.value) {
+    instance.value = await getInstance(instance.value.path, false).catch(handleError)
+  }
 
   if (installed.value) {
     await remove_project(

theseus_gui/src/store/theme.js

@@ -3,7 +3,6 @@ import { defineStore } from 'pinia'
 export const useTheming = defineStore('themeStore', {
   state: () => ({
     themeOptions: ['dark'],
-    collapsedNavigation: false,
     advancedRendering: true,
     selectedTheme: 'dark',
     darkTheme: true,