[beta] Fixes and improvements in UI & UX. Fix instances error in laun…

…cher and terminal logs.

theseus_gui/src/App.vue

@@ -1,22 +1,19 @@
 <script setup>
-import { i18n } from '@/main.js';
-const t = i18n.global.t;
-
+import { i18n } from '@/main.js'
 import { computed, onMounted, ref, watch } from 'vue'
-import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router'
+import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import {
+  Avatar,
+  Button,
+  Card,
+  FileIcon,
   HomeIcon,
-  SearchIcon,
   LibraryIcon,
-  SettingsIcon,
-  FileIcon,
-  Button,
   Notifications,
-  XIcon,
-  Card,
-  // TextLogo,
   PlusIcon,
-  Avatar,
+  SearchIcon,
+  SettingsIcon,
+  XIcon
 } from 'omorphia'
 import { useLoading, useTheming } from '@/store/state'
 import { useInstances } from '@/store/instances'
@@ -29,21 +26,10 @@ import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
 import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
 import { handleError, useNotifications } from '@/store/notifications.js'
-import { offline_listener, command_listener, warning_listener } from '@/helpers/events.js'
-import {
-  MinimizeIcon,
-  MaximizeIcon,
-  ChatIcon,
-  ArrowLeftFromLineIcon,
-  ArrowRightFromLineIcon,
-} from '@/assets/icons'
-import { isDev, getOS, isOffline, showLauncherLogsFolder } from '@/helpers/utils.js'
-import {
-  mixpanel_track,
-  mixpanel_init,
-  mixpanel_opt_out_tracking,
-  mixpanel_is_loaded,
-} from '@/helpers/mixpanel.js'
+import { command_listener, offline_listener, warning_listener } from '@/helpers/events.js'
+import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon, ChatIcon, MaximizeIcon, MinimizeIcon } from '@/assets/icons'
+import { getOS, isDev, isOffline, showLauncherLogsFolder } from '@/helpers/utils.js'
+import { mixpanel_init, mixpanel_is_loaded, mixpanel_opt_out_tracking, mixpanel_track } from '@/helpers/mixpanel.js'
 import { useDisableClicks } from '@/composables/click.js'
 import { openExternal } from '@/helpers/external.js'
 import { await_sync, check_safe_loading_bars_complete } from '@/helpers/state.js'
@@ -62,6 +48,9 @@ import { confirm } from '@tauri-apps/api/dialog'
 import { type } from '@tauri-apps/api/os'
 import { appWindow } from '@tauri-apps/api/window'
 import { storeToRefs } from 'pinia'
+import { useLanguage } from '@/store/language.js'
+
+const t = i18n.global.t
 
 const themeStore = useTheming()
 const languageStore = useLanguage()
@@ -87,7 +76,15 @@ const { instancesByPlayed } = storeToRefs(instances)
 defineExpose({
   initialize: async () => {
     isLoading.value = false
-    const { native_decorations, theme, language, opt_out_analytics, collapsed_navigation, advanced_rendering, fully_onboarded } =
+    const {
+      native_decorations,
+      theme,
+      language,
+      opt_out_analytics,
+      collapsed_navigation,
+      advanced_rendering,
+      fully_onboarded
+    } =
       await get()
     // video should play if the user is not on linux, and has not onboarded
     os.value = await getOS()
@@ -97,7 +94,7 @@ defineExpose({
     showOnboarding.value = !fully_onboarded
 
     nativeDecorations.value = native_decorations
-    if (os.value !== "MacOS") appWindow.setDecorations(native_decorations)
+    if (os.value !== 'MacOS') appWindow.setDecorations(native_decorations)
 
     themeStore.setThemeState(theme)
     languageStore.setLanguageState(language)
@@ -106,7 +103,7 @@ defineExpose({
 
     mixpanel_init('014c7d6a336d0efaefe3aca91063748d', { debug: dev, persistence: 'localStorage' })
     if (opt_out_analytics) {
-      console.info("[AR • Hard Disable Patch] • OPT_OUT_ANALYTICS (DISABLED) status is ", opt_out_analytics)
+      console.info('[AR • Hard Disable Patch] • OPT_OUT_ANALYTICS (DISABLED) status is ', opt_out_analytics)
       mixpanel_opt_out_tracking()
     }
     mixpanel_track('Launched', { version, dev, fully_onboarded })
@@ -128,7 +125,7 @@ defineExpose({
       notificationsWrapper.value.addNotification({
         title: 'Warning',
         text: e.message,
-        type: 'warn',
+        type: 'warn'
       })
     )
 
@@ -140,15 +137,15 @@ defineExpose({
     isLoading.value = false
     failureText.value = e
     os.value = await getOS()
-  },
+  }
 })
 
 const confirmClose = async () => {
   const confirmed = await confirm(
     'An action is currently in progress. Are you sure you want to exit?',
     {
       title: 'Modrinth',
-      type: 'warning',
+      type: 'warning'
     }
   )
   return confirmed
@@ -164,7 +161,7 @@ const handleClose = async () => {
   // (Exception: if the user is changing config directory, which takes control of the state, and it's taking a significant amount of time for some reason)
   const isSafe = await Promise.race([
     check_safe_loading_bars_complete(),
-    new Promise((r) => setTimeout(r, 2000)),
+    new Promise((r) => setTimeout(r, 2000))
   ])
   if (!isSafe) {
     const response = await confirmClose()
@@ -204,15 +201,15 @@ watch(notificationsWrapper, () => {
 
 useDisableClicks(document, window)
 
-// const accounts = ref(null)
+const accounts = ref(null)
 
 command_listener(async (e) => {
   if (e.event === 'RunMRPack') {
     // RunMRPack should directly install a local mrpack given a path
     if (e.path.endsWith('.mrpack')) {
       await install_from_file(e.path).catch(handleError)
       mixpanel_track('InstanceCreate', {
-        source: 'CreationModalFileDrop',
+        source: 'CreationModalFileDrop'
       })
     }
   } else {
@@ -221,9 +218,9 @@ command_listener(async (e) => {
   }
 })
 
-// const toggleSidebar = () => {
-//   sidebarOpen.value = !sidebarOpen.value
-// }
+const toggleSidebar = () => {
+  sidebarOpen.value = !sidebarOpen.value
+}
 </script>
 
 <template>
@@ -269,7 +266,10 @@ command_listener(async (e) => {
         </Card>
 
         <div class="button-row push-right">
-          <Button @click="showLauncherLogsFolder"><FileIcon />Open launcher logs</Button>
+          <Button @click="showLauncherLogsFolder">
+            <FileIcon />
+            Open launcher logs
+          </Button>
         </div>
       </Card>
     </div>
@@ -285,38 +285,22 @@ command_listener(async (e) => {
         '--sidebar-label-opacity': sidebarOpen ? '1' : '0',
       }"
     >
-<!--      <div class="pages-list">-->
-<!--        <div class="square-collapsed-space">-->
-<!--          <Button-->
-<!--            v-tooltip.right="t('Application.ToggleSidebar')"-->
-<!--            transparent-->
-<!--            icon-only-->
-<!--            class="collapsed-button"-->
-<!--            @click="toggleSidebar"-->
-<!--          >-->
-<!--            <PlusIcon />-->
-<!--            <span class="collapsed-button__label">{{ t('Application.ToggleSidebar') }}</span>-->
-<!--          </Button>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div class="pages-list">-->
-<!--        <div class="square-collapsed-space">-->
-<!--          <Button-->
-<!--            transparent-->
-<!--            icon-only-->
-<!--            class="collapsed-button non-collapse"-->
-<!--            @click="toggleSidebar"-->
-<!--          >-->
-<!--            <ArrowRightFromLineIcon v-if="!sidebarOpen" />-->
-<!--            <ArrowLeftFromLineIcon v-else />-->
-<!--          </Button>-->
-<!--        </div>-->
-<!--      </div>-->
       <div class="pages-list">
-        <suspense>
-        <div class="pages-list">
-          <AccountsCard ref="accounts" mode="small"/>
+        <div class="square-collapsed-space">
+          <Button
+            transparent
+            icon-only
+            class="collapsed-button non-collapse"
+            @click="toggleSidebar"
+          >
+            <ArrowRightFromLineIcon v-if="!sidebarOpen" />
+            <ArrowLeftFromLineIcon v-else />
+          </Button>
         </div>
+      </div>
+      <div class="pages-list">
+        <suspense>
+          <AccountsCard ref="accounts" mode="small" />
         </suspense>
         <div class="pages-list">
           <RouterLink v-tooltip.right="t('Application.Home')" to="/" class="btn icon-only collapsed-button">
@@ -350,7 +334,7 @@ command_listener(async (e) => {
         <RouterLink
           v-for="instance in instancesByPlayed"
           :key="instance.id"
-          v-tooltip="instance.metadata.name"
+          v-tooltip.right="instance.metadata.name"
           :to="`/instance/${encodeURIComponent(instance.path)}`"
           class="btn icon-only collapsed-button"
         >
@@ -362,6 +346,9 @@ command_listener(async (e) => {
           <span class="collapsed-button__label">{{ instance.metadata.name }}</span>
         </RouterLink>
       </div>
+      <div class="divider">
+        <hr />
+      </div>
       <div class="settings pages-list">
         <Button
           v-tooltip.right="t('Application.Support')"
@@ -387,7 +374,7 @@ command_listener(async (e) => {
           <PlusIcon />
           <span class="collapsed-button__label">{{ t('Application.CreateProfile') }}</span>
         </Button>
-        <AccountDropdown v-tooltip.right="t('Application.ModrinthAccount')"/>
+        <AccountDropdown v-tooltip.right="t('Application.ModrinthAccount')" />
       </div>
     </div>
     <div class="view">

theseus_gui/src/components/ui/AccountsCard.vue

@@ -1,21 +1,21 @@
 <template>
-  <div
-    v-if="mode !== 'isolated'"
-    ref="button"
-    v-tooltip.right="t('AccountsCard.MinecraftAccounts')"
-    class="button-base avatar-button"
-    :class="{ expanded: mode === 'expanded' }"
-    @click="showCard = !showCard"
-  >
-    <Avatar
-      :size="mode === 'expanded' ? 'xs' : 'sm'"
-      :src="
+    <Button
+      v-if="mode !== 'isolated'"
+      v-tooltip.right="t('AccountsCard.MinecraftAccounts')"
+      class="btn btn-transparent collapsed-button"
+      @click="showCard = !showCard"
+    >
+      <Avatar
+        size="xs"
+        class="collapsed-button__icon"
+        :src="
         selectedAccount
           ? `https://mc-heads.net/avatar/${selectedAccount.username}/128`
           : 'https://launcher-files.modrinth.com/assets/steve_head.png'
       "
-    />
-  </div>
+      />
+      <span class="collapsed-button__label">{{ t('AccountsCard.MinecraftAccounts') }}</span>
+    </Button>
   <transition name="fade">
     <Card
       v-if="showCard || mode === 'isolated'"
@@ -31,8 +31,9 @@
           </h4>
           <p>{{ t('AccountsCard.Active') }}</p>
         </div>
-        <Button v-tooltip="t('AccountsCard.Logout')" class="trash-icon-selected-fix" icon-only color="raised" @click="logout(selectedAccount.id)">
-          <TrashIcon/>
+        <Button v-tooltip="t('AccountsCard.Logout')" class="trash-icon-selected-fix" icon-only color="raised"
+                @click="logout(selectedAccount.id)">
+          <TrashIcon />
         </Button>
       </div>
       <div v-else-if="!selectedAccount && displayAccounts.length > 0" class="logged-out no-account">
@@ -41,12 +42,12 @@
       <div v-else class="logged-out no-account">
         <h4>{{ t('AccountsCard.NoAccount') }}</h4>
         <div class="account-no-account-fix">
-        <Button v-tooltip="t('AccountsCard.LoginLicense')" icon-only color="secondary" @click="login()">
-          <Microsoft class="account-type-no-account"/>
-        </Button>
-        <Button v-tooltip="t('AccountsCard.LoginOffline')" icon-only color="secondary" @click="loginOffline()">
-          <Pirate class="account-type-no-account"/>
-        </Button>
+          <Button v-tooltip="t('AccountsCard.LoginLicense')" icon-only color="secondary" @click="login()">
+            <Microsoft class="account-type-no-account" />
+          </Button>
+          <Button v-tooltip="t('AccountsCard.LoginOffline')" icon-only color="secondary" @click="loginOffline()">
+            <Pirate class="account-type-no-account" />
+          </Button>
         </div>
       </div>
 
@@ -58,7 +59,8 @@
               <component :is="printAccountType(account)" class="account-type" />
             </p>
           </Button>
-          <Button v-tooltip="t('AccountsCard.Logout')" class="account-buttons-fix" icon-only @click="logout(account.id)">
+          <Button v-tooltip="t('AccountsCard.Logout')" class="account-buttons-fix" icon-only
+                  @click="logout(account.id)">
             <TrashIcon />
           </Button>
         </div>
@@ -139,7 +141,17 @@
 
 <script setup>
 import { i18n } from '@/main.js'
-import { Avatar, Button, Card, ClipboardCopyIcon, GlobeIcon, LogInIcon, Modal, PlusIcon, TrashIcon } from 'omorphia'
+import {
+  Avatar,
+  Button,
+  Card,
+  ClipboardCopyIcon,
+  GlobeIcon,
+  LogInIcon,
+  Modal,
+  PlusIcon,
+  TrashIcon
+} from 'omorphia'
 
 import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
 import {
@@ -155,7 +167,7 @@ import { useTheming } from '@/store/theme.js'
 import { mixpanel_track } from '@/helpers/mixpanel'
 import QrcodeVue from 'qrcode.vue'
 import { process_listener } from '@/helpers/events'
-import { Pirate, Microsoft} from '@/assets/render/index.js'
+import { Pirate, Microsoft } from '@/assets/render/index.js'
 
 const t = i18n.global.t
 
@@ -398,19 +410,20 @@ onUnmounted(() => {
 
 .account-card {
   width: min-content; // Change this percent value for rescale AccountsCard.vue window
-  position: absolute;
+  position: initial;
   display: flex;
   flex-direction: column;
   top: 0.5rem;
-  left: 5.5rem;
+  left: auto;
+  margin-top: inherit;
   z-index: 11;
   gap: 0.5rem;
   padding: 1rem;
   border: 1px solid var(--color-button-bg);
   user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
-  max-height: 98vh;
+  max-height: 40vh;
   overflow-y: auto;
 
   &::-webkit-scrollbar-track {