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>

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;
+  padding: 1rem 0.5rem 1rem 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>
-    <div class="filter-header">
-      <div class="manage">
-        <multiselect
-          v-model="filterVersions"
-          :options="
-            versions
-              .flatMap((value) => value.loaders)
-              .filter((value, index, self) => self.indexOf(value) === index)
-          "
-          :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 loader..."
-        />
-        <multiselect
-          v-model="filterLoader"
-          :options="
-            versions
-              .flatMap((value) => value.game_versions)
-              .filter((value, index, self) => self.indexOf(value) === index)
-          "
-          :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 versions..."
-        />
-      </div>
-      <Button
-        class="no-wrap clear-filters"
-        :disabled="!filterLoader && !filterVersions"
-        :action="clearFilters"
-      >
-        <ClearIcon />
-        Clear filters
-      </Button>
+  <Card class="filter-header">
+    <div class="manage">
+      <multiselect
+        v-model="filterLoader"
+        :options="
+          versions
+            .flatMap((value) => value.loaders)
+            .filter((value, index, self) => self.indexOf(value) === index)
+        "
+        :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 loader..."
+        :custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
+      />
+      <multiselect
+        v-model="filterGameVersions"
+        :options="
+          versions
+            .flatMap((value) => value.game_versions)
+            .filter((value, index, self) => self.indexOf(value) === index)
+        "
+        :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 versions..."
+        :custom-label="(option) => option.charAt(0).toUpperCase() + option.slice(1)"
+      />
+      <multiselect
+        v-model="filterVersions"
+        :options="
+          versions
+            .map((value) => value.version_type)
+            .filter((value, index, self) => self.indexOf(value) === index)
+        "
+        :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)
-let filterLoader = ref(null)
+const filterVersions = ref([])
+const filterLoader = ref([])
+const filterGameVersions = ref([])
+
+const currentPage = ref(1)
 
 const clearFilters = () => {
-  filterVersions.value = null
-  filterLoader.value = null
+  filterVersions.value = []
+  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 {