UI/UX improvements (#146)

* Some initial changes

* New project cards

* Version

* Finalize improvements

* Fixed styling issues on versions page

* Removed light mode

* Run linter

* Added mixpanel stuff in context menus

* Fix styling issues

* Fix windows

* homepage fixes

* Finishing touches on mac styling

* Fixed windows related styling

* Update global.scss

---------

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

Cargo.lock

@@ -4338,6 +4338,7 @@ dependencies = [
  "objc",
  "once_cell",
  "open",
+ "os_info",
  "percent-encoding",
  "rand 0.8.5",
  "raw-window-handle",

theseus_gui/src-tauri/Cargo.toml

@@ -18,7 +18,7 @@ theseus = { path = "../../theseus", features = ["tauri"] }
 
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.3", features = ["devtools", "dialog", "dialog-open", "protocol-asset", "shell-open", "updater", "window-close", "window-create"] }
+tauri = { version = "1.3", features = ["devtools", "dialog", "dialog-open", "macos-private-api", "os-all", "protocol-asset", "shell-open", "updater", "window-close", "window-create", "window-hide", "window-maximize", "window-minimize", "window-set-decorations", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
 tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tokio = { version = "1", features = ["full"] }

theseus_gui/src-tauri/src/main.rs

@@ -74,6 +74,15 @@ fn main() {
         }))
         .plugin(tauri_plugin_window_state::Builder::default().build());
 
+    #[cfg(not(target_os = "macos"))]
+    {
+        builder = builder.setup(|app| {
+            let win = app.get_window("main").unwrap();
+            win.set_decorations(false);
+            Ok(())
+        })
+    }
+
     #[cfg(target_os = "macos")]
     {
         builder = builder
@@ -81,14 +90,14 @@ fn main() {
                 use api::window_ext::WindowExt;
                 let win = app.get_window("main").unwrap();
                 win.set_transparent_titlebar(true);
-                win.position_traffic_lights(0.0, 0.0);
+                win.position_traffic_lights(9.0, 16.0);
                 Ok(())
             })
             .on_window_event(|e| {
                 use api::window_ext::WindowExt;
                 if let WindowEvent::Resized(..) = e.event() {
                     let win = e.window();
-                    win.position_traffic_lights(0., 0.);
+                    win.position_traffic_lights(9.0, 16.0);
                 }
             })
     }

theseus_gui/src-tauri/tauri.conf.json

@@ -28,9 +28,21 @@
       },
       "window": {
         "create": true,
-        "close": true
+        "close": true,
+        "hide": true,
+        "show": true,
+        "maximize": true,
+        "minimize": true,
+        "unmaximize": true,
+        "unminimize": true,
+        "startDragging": true,
+        "setDecorations": true
+      },
+      "os": {
+        "all": true
       }
     },
+    "macOSPrivateApi": true,
     "bundle": {
       "active": true,
       "category": "Entertainment",
@@ -74,6 +86,8 @@
     },
     "windows": [
       {
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true,
         "fullscreen": false,
         "height": 650,
         "resizable": true,

theseus_gui/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { handleError, onMounted, ref, watch } from 'vue'
 import { RouterView, RouterLink, useRouter } from 'vue-router'
 import {
   HomeIcon,
@@ -9,6 +9,7 @@ import {
   SettingsIcon,
   Button,
   Notifications,
+  XIcon,
 } from 'omorphia'
 import { useLoading, useTheming } from '@/store/state'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
@@ -20,12 +21,35 @@ import SplashScreen from '@/components/ui/SplashScreen.vue'
 import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
 import { useNotifications } from '@/store/notifications.js'
 import { warning_listener } from '@/helpers/events.js'
+import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
+import { type } from '@tauri-apps/api/os'
+import { appWindow } from '@tauri-apps/api/window'
 import { isDev } from '@/helpers/utils.js'
 import mixpanel from 'mixpanel-browser'
 
 const themeStore = useTheming()
 
 const isLoading = ref(true)
+onMounted(async () => {
+  const { settings, collapsed_navigation } = await get().catch(handleError)
+  themeStore.setThemeState(settings)
+  themeStore.collapsedNavigation = collapsed_navigation
+
+  await warning_listener((e) =>
+    notificationsWrapper.value.addNotification({
+      title: 'Warning',
+      text: e.message,
+      type: 'warn',
+    })
+  )
+
+  if ((await type()) === 'Darwin') {
+    document.getElementsByTagName('html')[0].classList.add('mac')
+  } else {
+    document.getElementsByTagName('html')[0].classList.add('windows')
+  }
+})
+
 defineExpose({
   initialize: async () => {
     isLoading.value = false
@@ -175,15 +199,26 @@ document.querySelector('body').addEventListener('click', function (e) {
       </div>
     </div>
     <div class="view" :class="{ expanded: !themeStore.collapsedNavigation }">
-      <div class="appbar">
+      <div data-tauri-drag-region class="appbar">
         <section class="navigation-controls">
-          <Breadcrumbs />
+          <Breadcrumbs data-tauri-drag-region />
         </section>
         <section class="mod-stats">
           <Suspense>
-            <RunningAppBar />
+            <RunningAppBar data-tauri-drag-region />
           </Suspense>
         </section>
+        <section class="window-controls">
+          <Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
+            <MinimizeIcon />
+          </Button>
+          <Button class="titlebar-button" icon-only @click="() => appWindow.toggleMaximize()">
+            <MaximizeIcon />
+          </Button>
+          <Button class="titlebar-button close" icon-only @click="() => appWindow.close()">
+            <XIcon />
+          </Button>
+        </section>
       </div>
       <div class="router-view">
         <ModrinthLoadingIndicator
@@ -191,7 +226,7 @@ document.querySelector('body').addEventListener('click', function (e) {
           offset-width="var(--sidebar-width)"
         />
         <Notifications ref="notificationsWrapper" />
-        <RouterView v-slot="{ Component }">
+        <RouterView v-slot="{ Component }" class="main-view">
           <template v-if="Component">
             <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
               <component :is="Component"></component>
@@ -208,9 +243,46 @@ document.querySelector('body').addEventListener('click', function (e) {
   background-color: var(--color-brand-highlight);
   transition: all ease-in-out 0.1s;
 }
+
+.navigation-controls {
+  flex-grow: 1;
+  width: min-content;
+}
+
+.window-controls {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+
+  .titlebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease-in-out 0.1s;
+    background-color: var(--color-raised-bg);
+    color: var(--color-base);
+
+    &.close {
+      &:hover,
+      &:active {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+    }
+  }
+}
+
 .container {
   --appbar-height: 3.25rem;
-  --sidebar-width: 5rem;
+  --sidebar-width: 4.5rem;
 
   height: 100vh;
   display: flex;
@@ -226,49 +298,16 @@ document.querySelector('body').addEventListener('click', function (e) {
 
     .appbar {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      background: var(--color-super-raised-bg);
+      background: var(--color-raised-bg);
+      box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
       text-align: center;
-      padding: 0 0 0 1rem;
+      padding: var(--gap-md);
       height: 3.25rem;
-
+      gap: var(--gap-sm);
-      .navigation-controls {
+      //no select
-        display: inherit;
+      user-select: none;
-        align-items: inherit;
+      -webkit-user-select: none;
-        justify-content: stretch;
-
-        svg {
-          width: 1.25rem;
-          height: 1.25rem;
-          transition: all ease-in-out 0.1s;
-
-          &:hover {
-            filter: brightness(150%);
-          }
-        }
-
-        p {
-          margin-left: 0.3rem;
-        }
-
-        svg {
-          margin: auto 0.1rem;
-          transition: all ease-in-out 0.1s;
-          cursor: pointer;
-
-          &:hover {
-            font-weight: bolder;
-          }
-        }
-      }
-
-      .mod-stats {
-        height: 100%;
-        display: inherit;
-        align-items: inherit;
-        justify-content: flex-end;
-      }
     }
 
     .router-view {
@@ -276,37 +315,20 @@ document.querySelector('body').addEventListener('click', function (e) {
       height: calc(100% - 3.125rem);
       overflow: auto;
       overflow-x: hidden;
+      background-color: var(--color-bg);
     }
   }
 }
 
-.dark-mode {
-  .nav-container {
-    background: var(--color-bg) !important;
-  }
-  .pages-list {
-    a.router-link-active {
-      color: #fff;
-    }
-  }
-}
-
-.light-mode {
-  .nav-container {
-    box-shadow: var(--shadow-floating), var(--shadow-floating), var(--shadow-floating),
-      var(--shadow-floating) !important;
-  }
-}
-
 .nav-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   height: 100%;
+  background-color: var(--color-raised-bg);
   box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
-  padding: 1rem;
+  padding: var(--gap-md);
-  background: var(--color-raised-bg);
 
   &.expanded {
     --sidebar-width: 13rem;
@@ -332,6 +354,7 @@ document.querySelector('body').addEventListener('click', function (e) {
     background: inherit;
     transition: all ease-in-out 0.1s;
     color: var(--color-base);
+    box-shadow: none;
 
     &.router-link-active {
       color: var(--color-contrast);

theseus_gui/src/assets/icons/arrow-left-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>

theseus_gui/src/assets/icons/index.js

@@ -0,0 +1,4 @@
+export { default as ServerIcon } from './server.svg'
+export { default as MinimizeIcon } from './minimize.svg'
+export { default as MaximizeIcon } from './maximize.svg'
+export { default as SwapIcon } from './arrow-left-right.svg'

theseus_gui/src/assets/icons/maximize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scaling"><path d="M21 3 9 15"/><path d="M12 3H3v18h18v-9"/><path d="M16 3h5v5"/><path d="M14 15H9v-5"/></svg>

theseus_gui/src/assets/icons/minimize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><line x1="5" x2="19" y1="12" y2="12"/></svg>

theseus_gui/src/assets/icons/server.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>

theseus_gui/src/assets/stylesheets/global.scss

@@ -53,3 +53,71 @@ input {
   gap: 1rem;
   color: var(--color-contrast);
 }
+
+.badge {
+  display: flex;
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  align-items: center;
+  background-color: var(--color-bg);
+  padding-block: var(--gap-sm);
+  padding-inline: var(--gap-lg);
+  width: min-content;
+
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: 0.5rem;
+  }
+
+  &.featured {
+    background-color: var(--color-brand-highlight);
+    color: var(--color-contrast);
+  }
+}
+
+.mac {
+  .nav-container {
+    padding-top: calc(var(--gap-md) + 1.75rem);
+  }
+
+  .account-card {
+    top: calc(var(--gap-md) + 1.75rem);
+  }
+}
+
+.windows {
+  .window-controls {
+    display: flex !important;
+  }
+
+  .info-card {
+    right: 8rem;
+  }
+
+  .profile-card {
+    right: 8rem;
+  }
+}
+
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-button-bg) var(--color-bg);
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: var(--gap-md);
+  border: 3px solid var(--color-bg);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--color-bg);
+  border: 3px solid var(--color-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--color-button-bg);
+  border-radius: var(--radius-lg);
+  border: 3px solid var(--color-bg);
+}

theseus_gui/src/components/RowDisplay.vue

@@ -1,7 +1,5 @@
 <script setup>
 import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
   ClipboardCopyIcon,
   FolderOpenIcon,
   PlayIcon,
@@ -12,14 +10,30 @@ import {
   StopCircleIcon,
   ExternalIcon,
   EyeIcon,
+  ChevronRightIcon,
   ModalConfirm,
 } from 'omorphia'
 import Instance from '@/components/ui/Instance.vue'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import { remove } from '@/helpers/profile.js'
+import ProjectCard from '@/components/ui/ProjectCard.vue'
+import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
+import {
+  get_all_running_profile_paths,
+  get_uuids_by_profile_path,
+  kill_by_uuid,
+} from '@/helpers/process.js'
 import { handleError } from '@/store/notifications.js'
+import { remove, run } from '@/helpers/profile.js'
+import { useRouter } from 'vue-router'
+import { showInFolder } from '@/helpers/utils.js'
+import { useFetch } from '@/helpers/fetch.js'
+import { install as pack_install } from '@/helpers/pack.js'
 import { useTheming } from '@/store/state.js'
+import mixpanel from 'mixpanel-browser'
+
+const router = useRouter()
 
 const props = defineProps({
   instances: {
@@ -35,53 +49,28 @@ const props = defineProps({
   canPaginate: Boolean,
 })
 
-const allowPagination = ref(Array.apply(false, Array(props.instances.length)))
+const actualInstances = computed(() =>
+  props.instances.filter((x) => x && x.instances && x.instances[0])
+)
+
 const modsRow = ref(null)
 const instanceOptions = ref(null)
 const instanceComponents = ref(null)
+const rows = ref(null)
+const confirmModal = ref(null)
+const deleteConfirmModal = ref(null)
+const modInstallModal = ref(null)
 
 const themeStore = useTheming()
 const currentDeleteInstance = ref(null)
-const confirmModal = ref(null)
 
 async function deleteProfile() {
   if (currentDeleteInstance.value) {
-    instanceComponents.value = instanceComponents.value.filter(
-      (x) => x.instance.path !== currentDeleteInstance.value
-    )
     await remove(currentDeleteInstance.value).catch(handleError)
   }
 }
 
-const handlePaginationDisplay = () => {
+const handleInstanceRightClick = async (event, passedInstance) => {
-  for (let i = 0; i < props.instances.length; i++) {
-    let parentsRow = modsRow.value[i]
-
-    // This is wrapped in a setTimeout because the HtmlCollection seems to struggle
-    // with getting populated sometimes. It's a flaky error, but providing a bit of
-    // wait-time for the below expressions has not failed thus-far.
-    setTimeout(() => {
-      const children = parentsRow.children
-      const lastChild = children[children.length - 1]
-      const childBox = lastChild?.getBoundingClientRect()
-
-      if (childBox?.x + childBox?.width > window.innerWidth && props.canPaginate)
-        allowPagination.value[i] = true
-      else allowPagination.value[i] = false
-    }, 300)
-  }
-}
-
-onMounted(() => {
-  if (props.canPaginate) window.addEventListener('resize', handlePaginationDisplay)
-  handlePaginationDisplay()
-})
-
-onUnmounted(() => {
-  if (props.canPaginate) window.removeEventListener('resize', handlePaginationDisplay)
-})
-
-const handleInstanceRightClick = (event, passedInstance) => {
   const baseOptions = [
     { name: 'add_content' },
     { type: 'divider' },
@@ -95,21 +84,9 @@ const handleInstanceRightClick = (event, passedInstance) => {
     },
   ]
 
-  const options = !passedInstance.instance.path
+  const running = await get_all_running_profile_paths().catch(handleError)
-    ? [
+
-        {
+  const options = running.includes(passedInstance.path)
-          name: 'install',
-          color: 'primary',
-        },
-        { type: 'divider' },
-        {
-          name: 'open_link',
-        },
-        {
-          name: 'copy_link',
-        },
-      ]
-    : passedInstance.playing
     ? [
         {
           name: 'stop',
@@ -128,63 +105,122 @@ const handleInstanceRightClick = (event, passedInstance) => {
   instanceOptions.value.showMenu(event, passedInstance, options)
 }
 
+const handleProjectClick = (event, passedInstance) => {
+  instanceOptions.value.showMenu(event, passedInstance, [
+    {
+      name: 'install',
+      color: 'primary',
+    },
+    { type: 'divider' },
+    {
+      name: 'open_link',
+    },
+    {
+      name: 'copy_link',
+    },
+  ])
+}
+
 const handleOptionsClick = async (args) => {
   switch (args.option) {
     case 'play':
-      await args.item.play(null, 'InstanceRowContextMenu')
+      await run(args.item.path).catch(handleError)
+      mixpanel.track('InstanceStart', {
+        loader: args.item.metadata.loader,
+        game_version: args.item.metadata.game_version,
+      })
       break
     case 'stop':
-      await args.item.stop(null, 'InstanceRowContextMenu')
+      for (const u of await get_uuids_by_profile_path(args.item.path).catch(handleError)) {
+        await kill_by_uuid(u).catch(handleError)
+      }
+      mixpanel.track('InstanceStop', {
+        loader: args.item.metadata.loader,
+        game_version: args.item.metadata.game_version,
+      })
       break
     case 'add_content':
-      await args.item.addContent()
+      await router.push({
+        path: `/browse/${args.item.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+        query: { i: args.item.path },
+      })
       break
     case 'edit':
-      await args.item.seeInstance()
+      await router.push({
+        path: `/instance/${encodeURIComponent(args.item.path)}/`,
+      })
       break
     case 'delete':
-      currentDeleteInstance.value = args.item.instance.path
+      currentDeleteInstance.value = args.item.path
-      confirmModal.value.show()
+      deleteConfirmModal.value.show()
       break
     case 'open_folder':
-      await args.item.openFolder()
+      await showInFolder(args.item.path)
       break
     case 'copy_path':
-      await navigator.clipboard.writeText(args.item.instance.path)
+      await navigator.clipboard.writeText(args.item.path)
       break
-    case 'install':
+    case 'install': {
-      args.item.install()
+      const versions = await useFetch(
+        `https://api.modrinth.com/v2/project/${args.item.project_id}/version`,
+        'project versions'
+      )
+
+      if (args.item.project_type === 'modpack') {
+        await pack_install(
+          args.item.project_id,
+          versions[0].id,
+          args.item.title,
+          args.item.icon_url
+        )
+      } else {
+        modInstallModal.value.show(args.item.project_id, versions)
+      }
       break
+    }
     case 'open_link':
       window.__TAURI_INVOKE__('tauri', {
         __tauriModule: 'Shell',
         message: {
           cmd: 'open',
-          path: `https://modrinth.com/${args.item.instance.project_type}/${args.item.instance.slug}`,
+          path: `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
         },
       })
       break
     case 'copy_link':
       await navigator.clipboard.writeText(
-        `https://modrinth.com/${args.item.instance.project_type}/${args.item.instance.slug}`
+        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`
       )
       break
   }
 }
 
-const getInstanceIndex = (rowIndex, index) => {
+const maxInstancesPerRow = ref(0)
-  let instanceIndex = 0
+const maxProjectsPerRow = ref(0)
-  for (let i = 0; i < rowIndex; i++) {
+
-    instanceIndex += props.instances[i].instances.length
+const calculateCardsPerRow = () => {
-  }
+  // Calculate how many cards fit in one row
-  instanceIndex += index
+  const containerWidth = rows.value[0].clientWidth
-  return instanceIndex
+  // Convert container width from pixels to rem
+  const containerWidthInRem =
+    containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)
+  maxInstancesPerRow.value = Math.floor((containerWidthInRem + 1) / 11)
+  maxProjectsPerRow.value = Math.floor((containerWidthInRem + 1) / 17)
 }
+
+onMounted(() => {
+  calculateCardsPerRow()
+  window.addEventListener('resize', calculateCardsPerRow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', calculateCardsPerRow)
+})
 </script>
 
 <template>
   <ModalConfirm
-    ref="confirmModal"
+    ref="deleteConfirmModal"
     title="Are you sure you want to delete this instance?"
     description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
     :has-to-type="false"
@@ -193,28 +229,29 @@ const getInstanceIndex = (rowIndex, index) => {
     @proceed="deleteProfile"
   />
   <div class="content">
-    <div v-for="(row, rowIndex) in instances" :key="row.label" class="row">
+    <div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
       <div class="header">
-        <p>{{ row.label }}</p>
+        <router-link :to="row.route">{{ row.label }}</router-link>
-        <hr aria-hidden="true" />
+        <ChevronRightIcon />
-        <div v-if="allowPagination[rowIndex]" class="pagination">
-          <ChevronLeftIcon role="button" @click="modsRow[rowIndex].scrollLeft -= 170" />
-          <ChevronRightIcon role="button" @click="modsRow[rowIndex].scrollLeft += 170" />
-        </div>
       </div>
-      <section ref="modsRow" class="instances">
+      <section v-if="row.instances[0].metadata" ref="modsRow" class="instances">
         <Instance
-          v-for="(instance, instanceIndex) in row.instances"
+          v-for="instance in row.instances.slice(0, maxInstancesPerRow)"
-          ref="instanceComponents"
           :key="instance?.project_id || instance?.id"
           :instance="instance"
-          @contextmenu.prevent.stop="
+          @contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
-            (event) =>
+        />
-              handleInstanceRightClick(
+      </section>
-                event,
+      <section v-else ref="modsRow" class="projects">
-                instanceComponents[getInstanceIndex(rowIndex, instanceIndex)]
+        <ProjectCard
-              )
+          v-for="project in row.instances.slice(0, maxProjectsPerRow)"
-          "
+          :key="project?.project_id"
+          ref="instanceComponents"
+          class="item"
+          :project="project"
+          :confirm-modal="confirmModal"
+          :mod-install-modal="modInstallModal"
+          @contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
         />
       </section>
     </div>
@@ -231,6 +268,8 @@ const getInstanceIndex = (rowIndex, index) => {
     <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
     <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
   </ContextMenu>
+  <InstallConfirmModal ref="confirmModal" />
+  <InstanceInstallModal ref="modInstallModal" />
 </template>
 <style lang="scss" scoped>
 .content {
@@ -239,97 +278,70 @@ const getInstanceIndex = (rowIndex, index) => {
   align-items: center;
   justify-content: center;
   width: 100%;
+  padding: 1rem;
+  gap: 1rem;
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
 }
 
 .row {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  overflow: hidden;
   width: 100%;
-  padding: 1rem;
+  min-width: 100%;
 
   &:nth-child(even) {
     background: var(--color-bg);
   }
 
   .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: inherit;
     width: 100%;
     margin-bottom: 1rem;
-    gap: 1rem;
+    gap: var(--gap-xs);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-    p {
+    a {
       margin: 0;
-      font-size: 1rem;
+      font-size: var(--font-size-lg);
+      font-weight: bolder;
       white-space: nowrap;
       color: var(--color-contrast);
     }
 
-    hr {
+    svg {
-      background-color: var(--color-gray);
+      height: 1.5rem;
-      height: 1px;
+      width: 1.5rem;
-      width: 100%;
+      color: var(--color-contrast);
-      border: none;
     }
-
-    .pagination {
-      display: inherit;
-      align-items: inherit;
-
-      svg {
-        background: var(--color-raised-bg);
-        border-radius: var(--radius-lg);
-        width: 1.3rem;
-        height: 1.2rem;
-        cursor: pointer;
-        margin-right: 0.5rem;
-        transition: all ease-in-out 0.1s;
-
-        &:hover {
-          filter: brightness(150%);
-        }
-      }
-    }
-  }
-
-  section {
-    display: flex;
-    align-items: inherit;
-    transition: all ease-in-out 0.4s;
-    gap: 1rem;
   }
 
   .instances {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-gap: 1rem;
     width: 100%;
-    gap: 1rem;
-    margin-right: auto;
-    scroll-behavior: smooth;
-    overflow-x: scroll;
-    overflow-y: hidden;
-
-    :deep(.instance-card-item) {
-      margin-bottom: 0.1rem;
-    }
-
-    &::-webkit-scrollbar {
-      width: 0px;
-      background: transparent;
-    }
-
-    :deep(.instance) {
-      min-width: 10.5rem;
-      max-width: 10.5rem;
-    }
   }
-}
 
-.dark-mode {
+  .projects {
-  .row {
+    display: grid;
-    background-color: rgb(30, 31, 34);
+    width: 100%;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    grid-gap: 1rem;
+
+    .item {
+      width: 100%;
+      max-width: 100%;
+    }
   }
 }
 </style>

theseus_gui/src/components/ui/AccountsCard.vue

@@ -272,13 +272,13 @@ onBeforeUnmount(() => {
   align-items: center;
   gap: 0.5rem;
   color: var(--color-base);
-  background-color: var(--color-bg);
+  background-color: var(--color-raised-bg);
   border-radius: var(--radius-md);
-  box-shadow: none;
   width: 100%;
   text-align: left;
 
   &.expanded {
+    border: 1px solid var(--color-button-bg);
     padding: 1rem;
   }
 }

theseus_gui/src/components/ui/Instance.vue

@@ -250,27 +250,7 @@ onUnmounted(() => unlisten())
   &:hover {
     .cta {
       opacity: 1;
-      bottom: 4.75rem;
+      bottom: calc(var(--gap-md) + 4.25rem);
-    }
-
-    .instance-card-item {
-      background: hsl(220, 11%, 11%) !important;
-    }
-  }
-}
-
-.light-mode {
-  .instance:hover {
-    .instance-card-item {
-      background: hsl(0, 0%, 91%) !important;
-    }
-  }
-
-  .instance-card-item {
-    background: hsl(0, 0%, 100%) !important;
-
-    &:hover {
-      background: hsl(0, 0%, 91%) !important;
     }
   }
 }
@@ -280,14 +260,14 @@ onUnmounted(() => unlisten())
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   z-index: 1;
   width: 3rem;
   height: 3rem;
-  right: 1.25rem;
+  right: calc(var(--gap-md) * 2);
-  bottom: 4.25rem;
+  bottom: 3.25rem;
   opacity: 0;
-  transition: 0.2s ease-in-out bottom, 0.1s ease-in-out opacity, 0.1s ease-in-out filter !important;
+  transition: 0.2s ease-in-out bottom, 0.2s ease-in-out opacity, 0.1s ease-in-out filter !important;
   cursor: pointer;
   box-shadow: var(--shadow-floating);
 
@@ -321,17 +301,11 @@ onUnmounted(() => unlisten())
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  padding: 0.75rem !important; /* overrides card class */
+  padding: var(--gap-md);
   transition: 0.1s ease-in-out all !important; /* overrides Omorphia defaults */
-  background: hsl(220, 11%, 17%) !important;
   margin-bottom: 0;
 
-  &:hover {
+  .mod-image {
-    filter: brightness(1) !important;
-    background: hsl(220, 11%, 11%) !important;
-  }
-
-  > .avatar {
     --size: 100%;
 
     width: 100% !important;

theseus_gui/src/components/ui/ProjectCard.vue

@@ -0,0 +1,289 @@
+<script setup>
+import {
+  Card,
+  Avatar,
+  Button,
+  formatNumber,
+  formatCategory,
+  DownloadIcon,
+  HeartIcon,
+  CalendarIcon,
+} from 'omorphia'
+import { computed, ref } from 'vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { useRouter } from 'vue-router'
+import { useFetch } from '@/helpers/fetch.js'
+import { list } from '@/helpers/profile.js'
+import { handleError } from '@/store/notifications.js'
+import { install as pack_install } from '@/helpers/pack.js'
+dayjs.extend(relativeTime)
+
+const router = useRouter()
+const installing = ref(false)
+
+const props = defineProps({
+  project: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  confirmModal: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  modInstallModal: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const toColor = computed(() => {
+  let color = props.project.color
+
+  color >>>= 0
+  const b = color & 0xff
+  const g = (color >>> 8) & 0xff
+  const r = (color >>> 16) & 0xff
+  return 'rgba(' + [r, g, b, 1].join(',') + ')'
+})
+
+const toTransparent = computed(() => {
+  let color = props.project.color
+
+  color >>>= 0
+  const b = color & 0xff
+  const g = (color >>> 8) & 0xff
+  const r = (color >>> 16) & 0xff
+  return (
+    'linear-gradient(rgba(' +
+    [r, g, b, 0.03].join(',') +
+    '), 65%, rgba(' +
+    [r, g, b, 0.3].join(',') +
+    '))'
+  )
+})
+
+const install = async (e) => {
+  e?.stopPropagation()
+  installing.value = true
+  const versions = await useFetch(
+    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
+    'project versions'
+  )
+
+  if (props.project.project_type === 'modpack') {
+    const packs = Object.values(await list(true).catch(handleError))
+
+    if (
+      packs.length === 0 ||
+      !packs
+        .map((value) => value.metadata)
+        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
+    ) {
+      installing.value = true
+      await pack_install(
+        props.project.project_id,
+        versions[0].id,
+        props.project.title,
+        props.project.icon_url
+      ).catch(handleError)
+      installing.value = false
+    } else
+      props.confirmModal.show(
+        props.project.project_id,
+        versions[0].id,
+        props.project.title,
+        props.project.icon_url
+      )
+  } else {
+    props.modInstallModal.show(props.project.project_id, versions)
+  }
+
+  installing.value = false
+}
+</script>
+
+<template>
+  <div class="wrapper">
+    <Card class="project-card button-base" @click="router.push(`/project/${project.slug}`)">
+      <div
+        class="banner"
+        :style="{
+          'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
+          'background-image': `url(${
+            project.featured_gallery ??
+            project.gallery[0] ??
+            'https://cdn.discordapp.com/attachments/817413688771608587/1119143634319724564/image.png'
+          })`,
+          'no-image': !project.featured_gallery && !project.gallery[0],
+        }"
+      >
+        <div class="badges">
+          <div class="badge">
+            <DownloadIcon />
+            {{ formatNumber(project.downloads) }}
+          </div>
+          <div class="badge">
+            <HeartIcon />
+            {{ formatNumber(project.follows) }}
+          </div>
+          <div class="badge">
+            <CalendarIcon />
+            {{ formatCategory(dayjs(project.date_modified).fromNow()) }}
+          </div>
+        </div>
+        <div
+          class="badges-wrapper"
+          :class="{
+            'no-image': !project.featured_gallery && !project.gallery[0],
+          }"
+          :style="{
+            background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
+          }"
+        ></div>
+      </div>
+      <Avatar class="icon" size="sm" :src="project.icon_url" />
+      <div class="title">
+        <div class="title-text">
+          {{ project.title }}
+        </div>
+        <div class="author">by {{ project.author }}</div>
+      </div>
+      <div class="description">
+        {{ project.description }}
+      </div>
+    </Card>
+    <Button color="primary" class="install" :disabled="installing" @click="install">
+      <DownloadIcon />
+      {{ installing ? 'Installing' : 'Install' }}
+    </Button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  position: relative;
+  aspect-ratio: 1;
+
+  &:hover {
+    .install:enabled {
+      opacity: 1;
+    }
+  }
+}
+
+.project-card {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template:
+    '. . . .' 0
+    '. icon title .' 3rem
+    'banner banner banner banner' auto
+    '. description description .' 3.5rem
+    '. . . .' 0 / 0 3rem minmax(0, 1fr) 0;
+  max-width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+  .icon {
+    grid-area: icon;
+  }
+
+  .title {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    grid-area: title;
+    white-space: nowrap;
+
+    .title-text {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: var(--font-size-md);
+      font-weight: bold;
+    }
+  }
+
+  .author {
+    font-size: var(--font-size-sm);
+    grid-area: author;
+  }
+
+  .banner {
+    grid-area: banner;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+
+    .badges-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      mix-blend-mode: hard-light;
+    }
+
+    .badges {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: var(--gap-sm);
+      gap: var(--gap-xs);
+      display: flex;
+      z-index: 10;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: flex-end;
+    }
+  }
+
+  .description {
+    grid-area: description;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.badge {
+  background-color: var(--color-raised-bg);
+  font-size: var(--font-size-xs);
+  padding: var(--gap-xs) var(--gap-sm);
+  border-radius: var(--radius-sm);
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    margin-right: var(--gap-xs);
+  }
+}
+
+.install {
+  position: absolute;
+  top: calc(5rem + var(--gap-sm));
+  right: var(--gap-sm);
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+</style>

theseus_gui/src/components/ui/RunningAppBar.vue

@@ -1,45 +1,47 @@
 <template>
-  <div v-if="selectedProfile" class="status">
+  <div class="action-groups">
-    <span class="circle running" />
+    <Button
-    <div
+      v-if="currentLoadingBars.length > 0"
-      ref="profileButton"
+      ref="infoButton"
-      class="running-text"
+      icon-only
-      :class="{ clickable: currentProcesses.length > 1 }"
+      class="icon-button show-card-icon"
-      @click="toggleProfiles()"
+      @click="toggleCard()"
     >
-      {{ selectedProfile.metadata.name }}
+      <DownloadIcon />
-      <div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
+    </Button>
-        <DropdownIcon />
+    <div v-if="selectedProfile" class="status">
+      <span class="circle running" />
+      <div
+        ref="profileButton"
+        class="running-text"
+        :class="{ clickable: currentProcesses.length > 1 }"
+        @click="toggleProfiles()"
+      >
+        {{ selectedProfile.metadata.name }}
+        <div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
+          <DropdownIcon />
+        </div>
       </div>
+      <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
+        <StopCircleIcon />
+      </Button>
+      <Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
+        <TerminalSquareIcon />
+      </Button>
+      <Button
+        v-if="currentLoadingBars.length > 0"
+        ref="infoButton"
+        icon-only
+        class="icon-button show-card-icon"
+        @click="toggleCard()"
+      >
+        <DownloadIcon />
+      </Button>
+    </div>
+    <div v-else class="status">
+      <span class="circle stopped" />
+      <span class="running-text"> No running instances </span>
     </div>
-    <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
-      <StopCircleIcon />
-    </Button>
-    <Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
-      <TerminalSquareIcon />
-    </Button>
-    <Button
-      v-if="currentLoadingBars.length > 0"
-      ref="infoButton"
-      icon-only
-      class="icon-button show-card-icon"
-      @click="toggleCard()"
-    >
-      <DownloadIcon />
-    </Button>
-  </div>
-  <div v-else class="status">
-    <span class="circle stopped" />
-    <span class="running-text"> No running instances </span>
-    <Button
-      v-if="currentLoadingBars.length > 0"
-      ref="infoButton"
-      icon-only
-      class="icon-button show-card-icon"
-      @click="toggleCard()"
-    >
-      <DownloadIcon />
-    </Button>
   </div>
   <transition name="download">
     <Card v-if="showCard === true" ref="card" class="info-card">
@@ -228,6 +230,13 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
+.action-groups {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
 .arrow {
   transition: transform 0.2s ease-in-out;
   display: flex;
@@ -238,14 +247,13 @@ onBeforeUnmount(() => {
 }
 
 .status {
-  height: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 0.5rem;
-  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-md);
-  padding: 0 1rem;
+  border: 1px solid var(--color-button-bg);
-  margin: 0;
+  padding: var(--gap-sm) var(--gap-lg);
 }
 
 .running-text {

theseus_gui/src/components/ui/SearchCard.vue

@@ -77,7 +77,7 @@ import {
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ref } from 'vue'
-import { add_project_from_version as installMod, list } from '@/helpers/profile.js'
+import { add_project_from_version as installMod, check_installed, list } from '@/helpers/profile.js'
 import { install as packInstall } from '@/helpers/pack.js'
 import { installVersionDependencies } from '@/helpers/utils.js'
 import { useFetch } from '@/helpers/fetch.js'
@@ -121,7 +121,9 @@ const props = defineProps({
 })
 
 const installing = ref(false)
-const installed = ref(props.project.installed)
+const installed = ref(
+  props.instance ? await check_installed(props.instance.path, props.project.project_id) : false
+)
 
 async function install() {
   installing.value = true
@@ -278,28 +280,6 @@ async function install() {
   }
 }
 
-.badge {
-  display: flex;
-  border-radius: var(--radius-md);
-  white-space: nowrap;
-  font-weight: 500;
-  align-items: center;
-  background-color: var(--color-bg);
-  padding-block: var(--gap-sm);
-  padding-inline: var(--gap-lg);
-
-  svg {
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: 0.5rem;
-  }
-
-  &.featured {
-    background-color: var(--color-brand-highlight);
-    color: var(--color-contrast);
-  }
-}
-
 .button-group {
   display: inline-flex;
   flex-direction: row;

theseus_gui/src/pages/Browse.vue

@@ -475,7 +475,7 @@ const showLoaders = computed(
 <template>
   <div class="search-container">
     <aside class="filter-panel">
-      <div v-if="instanceContext" class="small-instance">
+      <Card v-if="instanceContext" class="small-instance">
         <router-link :to="`/instance/${encodeURIComponent(instanceContext.path)}`" class="instance">
           <Avatar
             :src="
@@ -512,7 +512,7 @@ const showLoaders = computed(
           @update:model-value="onSearchChangeToTop(1)"
           @click.prevent.stop
         />
-      </div>
+      </Card>
       <Card class="search-panel-card">
         <Button
           role="button"
@@ -707,10 +707,7 @@ const showLoaders = computed(
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss">
 .small-instance {
-  background: var(--color-bg);
+  min-height: unset !important;
-  padding: var(--gap-lg);
-  border-radius: var(--radius-md);
-  margin-bottom: var(--gap-md);
 
   .instance {
     display: flex;
@@ -765,8 +762,7 @@ const showLoaders = computed(
 .search-panel-card {
   display: flex;
   flex-direction: column;
-  background-color: var(--color-bg) !important;
+  margin-bottom: 0 !important;
-  margin-bottom: 0;
   min-height: min-content !important;
 }
 
@@ -825,14 +821,20 @@ const showLoaders = computed(
   .filter-panel {
     position: fixed;
     width: 20rem;
-    background: var(--color-raised-bg);
+    padding: 1rem 0.5rem 1rem 1rem;
-    padding: 1rem;
     display: flex;
     flex-direction: column;
     height: fit-content;
     min-height: calc(100vh - 3.25rem);
     max-height: calc(100vh - 3.25rem);
     overflow-y: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      background: transparent;
+    }
 
     h2 {
       color: var(--color-contrast);
@@ -844,8 +846,8 @@ const showLoaders = computed(
 
   .search {
     scroll-behavior: smooth;
-    margin: 0 1rem 0.5rem 21rem;
+    margin: 0 1rem 0.5rem 20.5rem;
-    width: calc(100% - 22rem);
+    width: calc(100% - 20.5rem);
 
     .loading {
       margin: 2rem;

theseus_gui/src/pages/Index.vue

@@ -21,7 +21,9 @@ breadcrumbs.setRootContext({ name: 'Home', link: route.path })
 const recentInstances = shallowRef([])
 
 const getInstances = async () => {
+  console.log('aa')
   const profiles = await list(true).catch(handleError)
+  console.log(profiles)
   recentInstances.value = Object.values(profiles).sort((a, b) => {
     return dayjs(b.metadata.last_played ?? 0).diff(dayjs(a.metadata.last_played ?? 0))
   })
@@ -69,16 +71,19 @@ onUnmounted(() => unlisten())
       :instances="[
         {
           label: 'Jump back in',
+          route: '/library',
           instances: recentInstances,
           downloaded: true,
         },
         {
           label: 'Popular packs',
+          route: '/browse/modpack',
           instances: featuredModpacks,
           downloaded: false,
         },
         {
           label: 'Popular mods',
+          route: '/browse/mod',
           instances: featuredMods,
           downloaded: false,
         },

theseus_gui/src/pages/Library.vue

@@ -23,12 +23,7 @@ onUnmounted(() => unlisten())
 </script>
 
 <template>
-  <GridDisplay
+  <GridDisplay label="Instances" :instances="instances" class="display" />
-    v-if="instances.length > 0"
-    label="Instances"
-    :instances="instances"
-    class="display"
-  />
 </template>
 
 <style lang="scss" scoped>

theseus_gui/src/pages/Settings.vue

@@ -342,7 +342,7 @@ watch(
 
 <style lang="scss" scoped>
 .settings-page {
-  margin: 1rem 1rem 1rem 0;
+  margin: 1rem;
 }
 
 .installation-input {

theseus_gui/src/pages/instance/Index.vue

@@ -57,21 +57,22 @@
             Folder
           </Button>
         </span>
+        <hr class="card-divider" />
+        <div class="pages-list">
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
+            <BoxIcon />
+            Mods
+          </RouterLink>
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
+            <FileIcon />
+            Logs
+          </RouterLink>
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
+            <SettingsIcon />
+            Options
+          </RouterLink>
+        </div>
       </Card>
-      <div class="pages-list">
-        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
-          <BoxIcon />
-          Mods
-        </RouterLink>
-        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
-          <FileIcon />
-          Logs
-        </RouterLink>
-        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
-          <SettingsIcon />
-          Options
-        </RouterLink>
-      </div>
     </div>
     <div class="content">
       <Promotion />
@@ -266,7 +267,6 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .instance-card {
-  background: var(--color-bg);
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -288,7 +288,6 @@ Button {
   display: flex;
   flex-direction: column;
   padding: 1rem;
-  background: var(--color-raised-bg);
   min-height: calc(100% - 3.25rem);
   overflow: hidden;
 }
@@ -321,7 +320,7 @@ Button {
 }
 
 .content {
-  margin-left: 20rem;
+  margin-left: 19rem;
 }
 
 .instance-info {
@@ -341,7 +340,7 @@ Button {
 .pages-list {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--gap-xs);
 
   a {
     font-size: 100%;
@@ -350,7 +349,6 @@ Button {
     transition: all ease-in-out 0.1s;
     width: 100%;
     color: var(--color-primary);
-    padding: var(--gap-md);
     box-shadow: none;
 
     &.router-link-exact-active {
@@ -373,28 +371,6 @@ Button {
   }
 }
 
-.header-nav {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0.5rem;
-  gap: 0.5rem;
-  background: var(--color-raised-bg);
-}
-
-.project-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 1rem;
-  background: var(--color-raised-bg);
-  width: 20rem;
-}
-
 .instance-nav {
   display: flex;
   flex-direction: row;
@@ -402,7 +378,6 @@ Button {
   justify-content: left;
   padding: 1rem;
   gap: 0.5rem;
-  background: var(--color-raised-bg);
   height: min-content;
   width: 100%;
 }

theseus_gui/src/pages/instance/Mods.vue

@@ -52,17 +52,28 @@
         v-model="selectedProjectType"
         :items="Object.keys(selectableProjectTypes)"
       />
-      <Button :disabled="!projects.some((x) => x.outdated)" class="no-wrap" @click="updateAll">
+      <DropdownButton
-        <UpdatedIcon />
+        :options="['update_all', 'filter_update']"
-        Update {{ selected.length > 0 ? 'selected' : 'all' }}
+        default-value="update_all"
-      </Button>
+        :disabled="!projects.some((x) => x.outdated)"
+        @option-click="updateAll"
+      >
+        <template #update_all>
+          <UpdatedIcon />
+          Update {{ selected.length > 0 ? 'selected' : 'all' }}
+        </template>
+        <template #filter_update>
+          <UpdatedIcon />
+          Select Updatable
+        </template>
+      </DropdownButton>
       <Button v-if="selected.length > 0" class="no-wrap" @click="deleteWarning.show()">
         <TrashIcon />
         Remove selected
       </Button>
       <DropdownButton
         v-if="selected.length > 0"
-        :options="['toggle', 'disable', 'enable']"
+        :options="['toggle', 'disable', 'enable', 'hide_show']"
         default-value="toggle"
         @option-click="toggleSelected"
       >
@@ -78,6 +89,10 @@
           <CheckCircleIcon />
           Enable selected
         </template>
+        <template #hide_show>
+          <CheckCircleIcon />
+          {{ hideNonSelected ? 'Show' : 'Hide' }} unselected
+        </template>
       </DropdownButton>
       <DropdownButton
         v-if="selected.length > 0"
@@ -299,6 +314,7 @@ const sortFilter = ref('')
 const selectedProjectType = ref('All')
 const selected = computed(() => projects.value.filter((mod) => mod.selected))
 const deleteWarning = ref(null)
+const hideNonSelected = ref(false)
 
 const selectableProjectTypes = computed(() => {
   const obj = { All: 'all' }
@@ -313,12 +329,19 @@ const selectableProjectTypes = computed(() => {
 
 const search = computed(() => {
   const projectType = selectableProjectTypes.value[selectedProjectType.value]
-  const filtered = projects.value.filter((mod) => {
+  const filtered = projects.value
-    return (
+    .filter((mod) => {
-      mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
+      return (
-      (projectType === 'all' || mod.project_type === projectType)
+        mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
-    )
+        (projectType === 'all' || mod.project_type === projectType)
-  })
+      )
+    })
+    .filter((mod) => {
+      if (hideNonSelected.value) {
+        return mod.selected
+      }
+      return true
+    })
 
   return updateSort(filtered, sortFilter.value)
 })
@@ -368,37 +391,45 @@ function updateSort(projects, sort) {
   }
 }
 
-async function updateAll() {
+async function updateAll(args) {
-  const setProjects = []
+  if (args.option === 'update_all') {
-  for (const [i, project] of selected.value ?? projects.value.entries()) {
+    const setProjects = []
-    if (project.outdated) {
+    for (const [i, project] of selected.value ?? projects.value.entries()) {
-      project.updating = true
+      if (project.outdated) {
-      setProjects.push(i)
+        project.updating = true
+        setProjects.push(i)
+      }
+    }
+
+    const paths = await update_all(props.instance.path).catch(handleError)
+
+    for (const [oldVal, newVal] of Object.entries(paths)) {
+      const index = projects.value.findIndex((x) => x.path === oldVal)
+      projects.value[index].path = newVal
+      projects.value[index].outdated = false
+
+      if (projects.value[index].updateVersion) {
+        projects.value[index].version = projects.value[index].updateVersion.version_number
+        projects.value[index].updateVersion = null
+      }
+    }
+    for (const project of setProjects) {
+      projects.value[project].updating = false
+    }
+
+    mixpanel.track('InstanceUpdateAll', {
+      loader: props.instance.metadata.loader,
+      game_version: props.instance.metadata.game_version,
+      count: setProjects.length,
+      selected: selected.value.length > 1,
+    })
+  } else {
+    for (const project of projects.value) {
+      if (project.outdated) {
+        project.selected = true
+      }
     }
   }
-
-  const paths = await update_all(props.instance.path).catch(handleError)
-
-  for (const [oldVal, newVal] of Object.entries(paths)) {
-    const index = projects.value.findIndex((x) => x.path === oldVal)
-    projects.value[index].path = newVal
-    projects.value[index].outdated = false
-
-    if (projects.value[index].updateVersion) {
-      projects.value[index].version = projects.value[index].updateVersion.version_number
-      projects.value[index].updateVersion = null
-    }
-  }
-  for (const project of setProjects) {
-    projects.value[project].updating = false
-  }
-
-  mixpanel.track('InstanceUpdateAll', {
-    loader: props.instance.metadata.loader,
-    game_version: props.instance.metadata.game_version,
-    count: setProjects.length,
-    selected: selected.value.length > 1,
-  })
 }
 
 async function updateProject(mod) {
@@ -523,6 +554,9 @@ async function toggleSelected(args) {
         }
       }
       break
+    case 'hide_show':
+      hideNonSelected.value = !hideNonSelected.value
+      break
   }
 }
 

theseus_gui/src/pages/project/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="root-container">
     <div v-if="data" class="project-sidebar">
-      <div v-if="instance" class="small-instance">
+      <Card v-if="instance" class="small-instance">
         <router-link class="instance" :to="`/instance/${encodeURIComponent(instance.path)}`">
           <Avatar
             :src="
@@ -23,7 +23,7 @@
             </span>
           </div>
         </router-link>
-      </div>
+      </Card>
       <Card class="sidebar-card" @contextmenu.prevent.stop="handleRightClick">
         <Avatar size="lg" :src="data.icon_url" />
         <div class="instance-info">
@@ -207,6 +207,7 @@
         :dependencies="dependencies"
         :install="install"
         :installed="installed"
+        :installed-version="installedVersion"
       />
     </div>
   </div>
@@ -259,6 +260,7 @@ import {
   add_project_from_version as installMod,
   check_installed,
   get as getInstance,
+  remove_project,
 } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -284,7 +286,6 @@ const incompatibilityWarning = ref(null)
 
 const options = ref(null)
 const installing = ref(false)
-
 const data = shallowRef(null)
 const versions = shallowRef([])
 const members = shallowRef([])
@@ -293,6 +294,7 @@ const categories = shallowRef([])
 const instance = ref(null)
 
 const installed = ref(false)
+const installedVersion = ref(null)
 
 async function fetchProjectData() {
   ;[
@@ -315,6 +317,11 @@ async function fetchProjectData() {
     instance.value?.path &&
     (await check_installed(instance.value.path, data.value.id).catch(handleError))
   breadcrumbs.setName('Project', data.value.title)
+  installedVersion.value = instance.value
+    ? Object.values(instance.value.projects).find(
+        (p) => p?.metadata?.version?.project_id === data.value.id
+      )?.metadata?.version?.id
+    : null
 }
 
 await fetchProjectData()
@@ -338,6 +345,18 @@ async function install(version) {
   installing.value = true
   let queuedVersionData
 
+  if (installed.value) {
+    await remove_project(
+      instance.value.path,
+      Object.entries(instance.value.projects)
+        .map(([key, value]) => ({
+          key,
+          value,
+        }))
+        .find((p) => p.value.metadata?.version?.project_id === data.value.id).key
+    )
+  }
+
   if (version) {
     queuedVersionData = versions.value.find((v) => v.id === version)
   } else {
@@ -406,7 +425,7 @@ async function install(version) {
           queuedVersionData = selectedVersion
           await installMod(instance.value.path, selectedVersion.id).catch(handleError)
           await installVersionDependencies(instance.value, queuedVersionData)
-
+          installedVersion.value = selectedVersion.id
           mixpanel.track('ProjectInstall', {
             loader: instance.value.metadata.loader,
             game_version: instance.value.metadata.game_version,
@@ -430,7 +449,7 @@ async function install(version) {
         if (compatible) {
           await installMod(instance.value.path, queuedVersionData.id).catch(handleError)
           await installVersionDependencies(instance.value, queuedVersionData)
-
+          installedVersion.value = queuedVersionData.id
           mixpanel.track('ProjectInstall', {
             loader: instance.value.metadata.loader,
             game_version: instance.value.metadata.game_version,
@@ -513,15 +532,20 @@ const handleOptionsClick = (args) => {
   height: fit-content;
   max-height: calc(100vh - 3.25rem);
   overflow-y: auto;
-  background: var(--color-raised-bg);
+  padding: 1rem 0.5rem 1rem 1rem;
-  padding: 1rem;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
 }
 
 .sidebar-card {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  background-color: var(--color-bg);
 }
 
 .content-container {
@@ -529,7 +553,7 @@ const handleOptionsClick = (args) => {
   flex-direction: column;
   width: 100%;
   padding: 1rem;
-  margin-left: 20rem;
+  margin-left: 19.5rem;
 }
 
 .button-group {
@@ -652,7 +676,6 @@ const handleOptionsClick = (args) => {
 }
 
 .small-instance {
-  background: var(--color-bg);
   padding: var(--gap-lg);
   border-radius: var(--radius-md);
   margin-bottom: var(--gap-md);

theseus_gui/src/pages/project/Versions.vue

@@ -1,50 +1,76 @@
 <template>
-  <Card>
+  <Card class="filter-header">
-    <div class="filter-header">
+    <div class="manage">
-      <div class="manage">
+      <multiselect
-        <multiselect
+        v-model="filterLoader"
-          v-model="filterVersions"
+        :options="
-          :options="
+          versions
-            versions
+            .flatMap((value) => value.loaders)
-              .flatMap((value) => value.loaders)
+            .filter((value, index, self) => self.indexOf(value) === index)
-              .filter((value, index, self) => self.indexOf(value) === index)
+        "
-          "
+        :multiple="true"
-          :multiple="true"
+        :searchable="true"
-          :searchable="true"
+        :show-no-results="false"
-          :show-no-results="false"
+        :close-on-select="false"
-          :close-on-select="false"
+        :clear-search-on-select="false"
-          :clear-search-on-select="false"
+        :show-labels="false"
-          :show-labels="false"
+        :selectable="() => versions.length <= 6"
-          :selectable="() => versions.length <= 6"
+        placeholder="Filter loader..."
-          placeholder="Filter loader..."
+        :custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
-        />
+      />
-        <multiselect
+      <multiselect
-          v-model="filterLoader"
+        v-model="filterGameVersions"
-          :options="
+        :options="
-            versions
+          versions
-              .flatMap((value) => value.game_versions)
+            .flatMap((value) => value.game_versions)
-              .filter((value, index, self) => self.indexOf(value) === index)
+            .filter((value, index, self) => self.indexOf(value) === index)
-          "
+        "
-          :multiple="true"
+        :multiple="true"
-          :searchable="true"
+        :searchable="true"
-          :show-no-results="false"
+        :show-no-results="false"
-          :close-on-select="false"
+        :close-on-select="false"
-          :clear-search-on-select="false"
+        :clear-search-on-select="false"
-          :show-labels="false"
+        :show-labels="false"
-          :selectable="() => versions.length <= 6"
+        :selectable="() => versions.length <= 6"
-          placeholder="Filter versions..."
+        placeholder="Filter versions..."
-        />
+        :custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
-      </div>
+      />
-      <Button
+      <multiselect
-        class="no-wrap clear-filters"
+        v-model="filterVersions"
-        :disabled="!filterLoader && !filterVersions"
+        :options="
-        :action="clearFilters"
+          versions
-      >
+            .map((value) => value.version_type)
-        <ClearIcon />
+            .filter((value, index, self) => self.indexOf(value) === index)
-        Clear filters
+        "
-      </Button>
+        :multiple="true"
+        :searchable="true"
+        :show-no-results="false"
+        :close-on-select="false"
+        :clear-search-on-select="false"
+        :show-labels="false"
+        :selectable="() => versions.length <= 6"
+        placeholder="Filter release channel..."
+        :custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
+      />
     </div>
+    <Button
+      class="no-wrap clear-filters"
+      :disabled="
+        filterVersions.length === 0 && filterLoader.length === 0 && filterGameVersions.length === 0
+      "
+      :action="clearFilters"
+    >
+      <ClearIcon />
+      Clear filters
+    </Button>
   </Card>
+  <Pagination
+    :page="currentPage"
+    :count="Math.ceil(filteredVersions.length / 20)"
+    class="pagination-before"
+    :link-function="(page) => `?page=${page}`"
+    @switch-page="switchPage"
+  />
   <Card class="mod-card">
     <div class="table">
       <div class="table-row table-head">
@@ -54,19 +80,20 @@
         <div class="table-cell table-text">Stats</div>
       </div>
       <div
-        v-for="version in versions"
+        v-for="version in filteredVersions.slice((currentPage - 1) * 20, currentPage * 20)"
         :key="version.id"
         class="table-row selectable"
         @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
       >
         <div class="table-cell table-text">
           <Button
-            color="primary"
+            :color="installed && version.id === installedVersion ? '' : 'primary'"
             icon-only
-            :disabled="installed"
+            :disabled="installed && version.id === installedVersion"
             @click.stop="() => install(version.id)"
           >
             <DownloadIcon v-if="!installed" />
+            <SwapIcon v-else-if="installed && version.id !== installedVersion" />
             <CheckIcon v-else />
           </Button>
         </div>
@@ -124,20 +151,34 @@
 </template>
 
 <script setup>
-import { Card, Button, CheckIcon, ClearIcon, Badge, DownloadIcon, formatNumber } from 'omorphia'
+import {
+  Card,
+  Button,
+  CheckIcon,
+  ClearIcon,
+  Badge,
+  DownloadIcon,
+  Pagination,
+  formatNumber,
+} from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { releaseColor } from '@/helpers/utils'
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { SwapIcon } from '@/assets/icons/index.js'
 
-let filterVersions = ref(null)
+const filterVersions = ref([])
-let filterLoader = ref(null)
+const filterLoader = ref([])
+const filterGameVersions = ref([])
+
+const currentPage = ref(1)
 
 const clearFilters = () => {
-  filterVersions.value = null
+  filterVersions.value = []
-  filterLoader.value = null
+  filterLoader.value = []
+  filterGameVersions.value = []
 }
 
-defineProps({
+const props = defineProps({
   versions: {
     type: Array,
     required: true,
@@ -148,8 +189,39 @@ defineProps({
   },
   installed: {
     type: Boolean,
-    required: true,
+    default: null,
   },
+  instance: {
+    type: Object,
+    default: null,
+  },
+  installedVersion: {
+    type: String,
+    default: null,
+  },
+})
+
+const filteredVersions = computed(() => {
+  return props.versions.filter(
+    (projectVersion) =>
+      (filterGameVersions.value.length === 0 ||
+        filterGameVersions.value.some((gameVersion) =>
+          projectVersion.game_versions.includes(gameVersion)
+        )) &&
+      (filterLoader.value.length === 0 ||
+        filterLoader.value.some((loader) => projectVersion.loaders.includes(loader))) &&
+      (filterVersions.value.length === 0 ||
+        filterVersions.value.includes(projectVersion.version_type))
+  )
+})
+
+function switchPage(page) {
+  currentPage.value = page
+}
+
+//watch all the filters and if a value changes, reset to page 1
+watch([filterVersions, filterLoader, filterGameVersions], () => {
+  currentPage.value = 1
 })
 </script>
 
@@ -160,6 +232,7 @@ defineProps({
   justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .table-row {
@@ -188,6 +261,7 @@ defineProps({
   flex-direction: column;
   gap: 1rem;
   overflow: hidden;
+  margin-top: 0.5rem;
 }
 
 .text-combo {