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/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;
-    }
-
-    .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;
+      bottom: calc(var(--gap-md) + 4.25rem);
     }
   }
 }
@@ -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;
-  bottom: 4.25rem;
+  right: calc(var(--gap-md) * 2);
+  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 {
-    filter: brightness(1) !important;
-    background: hsl(220, 11%, 11%) !important;
-  }
-
-  > .avatar {
+  .mod-image {
     --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">
-    <span class="circle running" />
-    <div
-      ref="profileButton"
-      class="running-text"
-      :class="{ clickable: currentProcesses.length > 1 }"
-      @click="toggleProfiles()"
+  <div class="action-groups">
+    <Button
+      v-if="currentLoadingBars.length > 0"
+      ref="infoButton"
+      icon-only
+      class="icon-button show-card-icon"
+      @click="toggleCard()"
     >
-      {{ selectedProfile.metadata.name }}
-      <div v-if="currentProcesses.length > 1" class="arrow" :class="{ rotate: showProfiles }">
-        <DropdownIcon />
+      <DownloadIcon />
+    </Button>
+    <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);
-  padding: 0 1rem;
-  margin: 0;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-button-bg);
+  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;