Community requested enhancements (#556)

* Make images lazy and fix #198

* Fix console spam

* Fix bug with bad pagination impl

* Fixes #232

* Finalize more bug fixes

* run lint

* Improve minecraft sign in, improve onboarding

* Linter

* Added back button

* Implement #530

* run linter

* Address changes

* Bump version + run fmt

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

theseus_gui/src/components/GridDisplay.vue

@@ -245,6 +245,7 @@ const filteredResults = computed(() => {
       <DropdownSelect
         v-model="sortBy"
         class="sort-dropdown"
+        name="Sort Dropdown"
         :options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
         placeholder="Select..."
       />
@@ -254,6 +255,7 @@ const filteredResults = computed(() => {
       <DropdownSelect
         v-model="filters"
         class="filter-dropdown"
+        name="Filter Dropdown"
         :options="['All profiles', 'Custom instances', 'Downloaded modpacks']"
         placeholder="Select..."
       />
@@ -263,6 +265,7 @@ const filteredResults = computed(() => {
       <DropdownSelect
         v-model="group"
         class="group-dropdown"
+        name="Group Dropdown"
         :options="['Category', 'Loader', 'Game version', 'None']"
         placeholder="Select..."
       />

theseus_gui/src/components/ui/AccountsCard.vue

@@ -2,6 +2,7 @@
   <div
     v-if="mode !== 'isolated'"
     ref="button"
+    v-tooltip="'Minecraft accounts'"
     class="button-base avatar-button"
     :class="{ expanded: mode === 'expanded' }"
     @click="showCard = !showCard"
@@ -14,15 +15,6 @@
           : 'https://launcher-files.modrinth.com/assets/steve_head.png'
       "
     />
-    <div v-show="mode === 'expanded'" class="avatar-text">
-      <div class="text no-select">
-        {{ selectedAccount ? selectedAccount.username : 'Offline' }}
-      </div>
-      <p class="accounts-text no-select">
-        <UsersIcon />
-        Accounts
-      </p>
-    </div>
   </div>
   <transition name="fade">
     <Card
@@ -64,10 +56,50 @@
       </Button>
     </Card>
   </transition>
+  <Modal ref="loginModal" class="modal" header="Signing in">
+    <div class="modal-body">
+      <QrcodeVue :value="loginUrl" class="qr-code" margin="3" size="160" />
+      <div class="modal-text">
+        <p>
+          Sign into Microsoft with your browser. If your browser didn't open, you can copy and open
+          the link below, or scan the QR code with your device.
+        </p>
+        <div class="iconified-input">
+          <LogInIcon />
+          <input type="text" :value="loginUrl" readonly />
+          <Button
+            v-tooltip="'Copy link'"
+            icon-only
+            color="raised"
+            @click="() => navigator.clipboard.writeText(loginUrl)"
+          >
+            <ClipboardCopyIcon />
+          </Button>
+        </div>
+        <div class="button-row">
+          <Button @click="openUrl">
+            <GlobeIcon />
+            Open link
+          </Button>
+          <Button class="transparent" @click="loginModal.hide"> Cancel </Button>
+        </div>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script setup>
-import { Avatar, Button, Card, PlusIcon, TrashIcon, UsersIcon, LogInIcon } from 'omorphia'
+import {
+  Avatar,
+  Button,
+  Card,
+  PlusIcon,
+  TrashIcon,
+  LogInIcon,
+  Modal,
+  GlobeIcon,
+  ClipboardCopyIcon,
+} from 'omorphia'
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import {
   users,
@@ -76,10 +108,10 @@ import {
   authenticate_await_completion,
 } from '@/helpers/auth'
 import { get, set } from '@/helpers/settings'
-import { WebviewWindow } from '@tauri-apps/api/window'
 import { handleError } from '@/store/state.js'
 import { get as getCreds, login_minecraft } from '@/helpers/mr_auth'
 import { mixpanel_track } from '@/helpers/mixpanel'
+import QrcodeVue from 'qrcode.vue'
 
 defineProps({
   mode: {
@@ -93,6 +125,9 @@ const emit = defineEmits(['change'])
 
 const settings = ref({})
 const accounts = ref([])
+const loginUrl = ref('')
+const loginModal = ref(null)
+
 async function refreshValues() {
   settings.value = await get().catch(handleError)
   accounts.value = await users().catch(handleError)
@@ -118,12 +153,18 @@ async function setAccount(account) {
 
 async function login() {
   const url = await authenticate_begin_flow().catch(handleError)
+  loginUrl.value = url
 
-  const window = new WebviewWindow('loginWindow', {
-    title: 'Modrinth App',
-    url: url,
+  await window.__TAURI_INVOKE__('tauri', {
+    __tauriModule: 'Shell',
+    message: {
+      cmd: 'open',
+      path: url,
+    },
   })
 
+  loginModal.value.show()
+
   const loggedIn = await authenticate_await_completion().catch(handleError)
 
   if (loggedIn && loggedIn[0]) {
@@ -139,7 +180,8 @@ async function login() {
       }
     }
   }
-  await window.close()
+
+  loginModal.value.hide()
   mixpanel_track('AccountLogIn')
 }
 
@@ -329,4 +371,37 @@ onBeforeUnmount(() => {
   gap: 0.25rem;
   margin: 0;
 }
+
+.qr-code {
+  background-color: white !important;
+  border-radius: var(--radius-md);
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-lg);
+  align-items: center;
+  padding: var(--gap-lg);
+
+  .modal-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-sm);
+
+    h2,
+    p {
+      margin: 0;
+    }
+  }
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.modal {
+  position: absolute;
+}
 </style>

theseus_gui/src/components/ui/Breadcrumbs.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="breadcrumbs">
+    <Button class="breadcrumbs__back transparent" icon-only @click="$router.back()">
+      <ChevronLeftIcon />
+    </Button>
+    <Button class="breadcrumbs__forward transparent" icon-only @click="$router.forward()">
+      <ChevronRightIcon />
+    </Button>
     {{ breadcrumbData.resetToNames(breadcrumbs) }}
     <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
       <router-link
@@ -25,7 +31,7 @@
 </template>
 
 <script setup>
-import { ChevronRightIcon } from 'omorphia'
+import { ChevronRightIcon, Button, ChevronLeftIcon } from 'omorphia'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
@@ -60,6 +66,18 @@ const breadcrumbs = computed(() => {
       margin: auto 0;
     }
   }
+
+  .breadcrumbs__back,
+  .breadcrumbs__forward {
+    margin: auto 0;
+    color: var(--color-base);
+    height: unset;
+    width: unset;
+  }
+
+  .breadcrumbs__forward {
+    margin-right: 1rem;
+  }
 }
 
 .selected {

theseus_gui/src/components/ui/IncompatibilityWarningModal.vue

@@ -25,6 +25,7 @@
               v-model="selectedVersion"
               :options="versions"
               placeholder="Select version"
+              name="Version select"
               :display-name="
                 (version) =>
                   `${version?.name} (${version?.loaders

theseus_gui/src/components/ui/RunningAppBar.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="action-groups">
+    <a href="https://discord.gg/modrinth" class="link">
+      <ChatIcon />
+      <span> Get support </span>
+    </a>
     <Button
       v-if="currentLoadingBars.length > 0"
       ref="infoButton"
@@ -120,6 +124,7 @@ import { refreshOffline, isOffline } from '@/helpers/utils.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { handleError } from '@/store/notifications.js'
 import { mixpanel_track } from '@/helpers/mixpanel'
+import { ChatIcon } from '@/assets/icons'
 
 const router = useRouter()
 const card = ref(null)
@@ -266,7 +271,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--gap-sm);
+  gap: var(--gap-md);
 }
 
 .arrow {
@@ -452,4 +457,14 @@ onBeforeUnmount(() => {
     transform: translateY(-100%);
   }
 }
+
+.link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  margin: 0;
+  color: var(--color-text);
+  text-decoration: none;
+}
 </style>

theseus_gui/src/components/ui/tutorial/FakeAppBar.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="action-groups">
+    <Button color="danger" outline @click="exit">
+      <LogOutIcon />
+      Exit tutorial
+    </Button>
     <Button v-if="showDownload" ref="infoButton" icon-only class="icon-button show-card-icon">
       <DownloadIcon />
     </Button>
@@ -36,7 +40,14 @@
 </template>
 
 <script setup>
-import { Button, DownloadIcon, Card, StopCircleIcon, TerminalSquareIcon } from 'omorphia'
+import {
+  Button,
+  DownloadIcon,
+  Card,
+  StopCircleIcon,
+  TerminalSquareIcon,
+  LogOutIcon,
+} from 'omorphia'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 
 defineProps({
@@ -48,6 +59,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  exit: {
+    type: Function,
+    required: true,
+  },
 })
 </script>
 

theseus_gui/src/components/ui/tutorial/FakeGridDisplay.vue

@@ -32,6 +32,7 @@ defineProps({
       <DropdownSelect
         v-model="sortBy"
         class="sort-dropdown"
+        name="Sort Dropdown"
         :options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
         placeholder="Select..."
       />
@@ -41,6 +42,7 @@ defineProps({
       <DropdownSelect
         v-model="filters"
         class="filter-dropdown"
+        name="Filter Dropdown"
         :options="['All profiles', 'Custom instances', 'Downloaded modpacks']"
         placeholder="Select..."
       />
@@ -50,6 +52,7 @@ defineProps({
       <DropdownSelect
         v-model="group"
         class="group-dropdown"
+        name="Group dropdown"
         :options="['Category', 'Loader', 'Game version', 'None']"
         placeholder="Select..."
       />

theseus_gui/src/components/ui/tutorial/FakeRowDisplay.vue

@@ -63,7 +63,7 @@ defineProps({
         >
           <Avatar
             size="sm"
-            src="https://launcher-files.modrinth.com/assets/maze-bg.png"
+            src="https://launcher-files.modrinth.com/assets/default_profile.png"
             alt="Mod card"
             class="mod-image"
           />

theseus_gui/src/components/ui/tutorial/FakeSearch.vue

@@ -176,7 +176,7 @@ defineProps({
       </Card>
     </aside>
     <div ref="searchWrapper" class="search">
-      <Promotion class="promotion" />
+      <Promotion class="promotion" query-param="?r=launcher" />
       <Card class="project-type-container">
         <NavRow :links="selectableProjectTypes" />
       </Card>

theseus_gui/src/components/ui/tutorial/OnboardingScreen.vue

@@ -8,7 +8,6 @@ import {
   SettingsIcon,
   XIcon,
   Notifications,
-  LogOutIcon,
 } from 'omorphia'
 import { appWindow } from '@tauri-apps/api/window'
 import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
@@ -160,7 +159,10 @@ onMounted(async () => {
           <div class="btn icon-only" :class="{ active: phase < 4 }">
             <HomeIcon />
           </div>
-          <div class="btn icon-only" :class="{ active: phase === 4 || phase === 5 }">
+          <div
+            class="btn icon-only"
+            :class="{ active: phase === 4 || phase === 5, highlighted: phase === 4 }"
+          >
             <SearchIcon />
           </div>
           <div
@@ -175,9 +177,6 @@ onMounted(async () => {
         </div>
       </div>
       <div class="settings pages-list">
-        <Button class="active" icon-only @click="finishOnboarding">
-          <LogOutIcon />
-        </Button>
         <Button class="sleek-primary" icon-only>
           <PlusIcon />
         </Button>
@@ -192,7 +191,11 @@ onMounted(async () => {
           <Breadcrumbs data-tauri-drag-region />
         </section>
         <section class="mod-stats">
-          <FakeAppBar :show-running="phase === 7" :show-download="phase === 5">
+          <FakeAppBar
+            :show-running="phase === 7"
+            :show-download="phase === 5"
+            :exit="finishOnboarding"
+          >
             <template #running>
               <TutorialTip
                 :progress-function="nextPhase"
@@ -430,12 +433,6 @@ onMounted(async () => {
       background-color: var(--color-brand-highlight);
       transition: all ease-in-out 0.1s;
     }
-
-    &.sleek-exit {
-      background-color: var(--color-red);
-      color: var(--color-accent-contrast);
-      transition: all ease-in-out 0.1s;
-    }
   }
 }