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