App redesign (#2946)

* Start of app redesign * format * continue progress * Content page nearly done * Fix recursion issues with content page * Fix update all alignment * Discover page progress * Settings progress * Removed unlocked-size hack that breaks web * Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues * Ads + run prettier * Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor * fix ads not hiding when plus log in * rev lockfile changes/conflicts * Fix sign in page * Add generated * (mostly) Data driven search * Fix search mobile issue * profile fixes * Project versions page, fix typescript on UI lib and misc fixes * Remove unused gallery component * Fix linkfunction err * Search filter controls at top, localization for locked filters * Fix provided filter names * Fix navigating from instance browse to main browse * Friends frontend (#2995) * Friends system frontend * (almost) finish frontend * finish friends, fix lint * Fix lint --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> * Refresh macOS app icon * Update web search UI more * Fix link opens * Fix frontend build --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2024-12-11 19:54:18 -08:00
parent 6ec1dcf088
commit c39bb78e38
257 changed files with 15713 additions and 9475 deletions
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -0,0 +1,117 @@
+<template>
+  <div v-if="project.versions.length > 0" class="flex flex-col gap-3">
+    <h2 class="text-lg m-0">{{ formatMessage(messages.title) }}</h2>
+    <section class="flex flex-col gap-2">
+      <h3 class="text-primary text-base m-0">{{ formatMessage(messages.minecraftJava) }}</h3>
+      <div class="flex flex-wrap gap-1">
+        <TagItem
+          v-for="version in getVersionsToDisplay(project, tags.gameVersions)"
+          :key="`version-tag-${version}`"
+        >
+          {{ version }}
+        </TagItem>
+      </div>
+    </section>
+    <section v-if="project.project_type !== 'resourcepack'" class="flex flex-col gap-2">
+      <h3 class="text-primary text-base m-0">{{ formatMessage(messages.platforms) }}</h3>
+      <div class="flex flex-wrap gap-1">
+        <TagItem
+          v-for="platform in project.loaders"
+          :key="`platform-tag-${platform}`"
+          :style="`--_color: var(--color-platform-${platform})`"
+        >
+          <svg v-html="tags.loaders.find((x) => x.name === platform).icon"></svg>
+          {{ formatCategory(platform) }}
+        </TagItem>
+      </div>
+    </section>
+    <section
+      v-if="
+        (project.actualProjectType === 'mod' || project.project_type === 'modpack') &&
+        !(project.client_side === 'unsupported' && project.server_side === 'unsupported') &&
+        !(project.client_side === 'unknown' && project.server_side === 'unknown')
+      "
+      class="flex flex-col gap-2"
+    >
+      <h3 class="text-primary text-base m-0">{{ formatMessage(messages.environments) }}</h3>
+      <div class="flex flex-wrap gap-1">
+        <TagItem
+          v-if="
+            (project.client_side === 'required' && project.server_side !== 'required') ||
+            (project.client_side === 'optional' && project.server_side === 'optional')
+          "
+        >
+          <ClientIcon aria-hidden="true" />
+          Client-side
+        </TagItem>
+        <TagItem
+          v-if="
+            (project.server_side === 'required' && project.client_side !== 'required') ||
+            (project.client_side === 'optional' && project.server_side === 'optional')
+          "
+        >
+          <ServerIcon aria-hidden="true" />
+          Server-side
+        </TagItem>
+        <TagItem v-if="false">
+          <UserIcon aria-hidden="true" />
+          Singleplayer
+        </TagItem>
+        <TagItem
+          v-if="
+            project.project_type !== 'datapack' &&
+            project.client_side !== 'unsupported' && project.server_side !== 'unsupported' && project.client_side !== 'unknown' && project.server_side !== 'unknown'
+          "
+        >
+          <MonitorSmartphoneIcon aria-hidden="true" />
+          Client and server
+        </TagItem>
+      </div>
+    </section>
+  </div>
+</template>
+<script setup lang="ts">
+import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
+import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
+import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
+import { useVIntl, defineMessages } from '@vintl/vintl'
+import TagItem from '../base/TagItem.vue'
+
+const { formatMessage } = useVIntl()
+
+type EnvironmentValue = 'optional' | 'required' | 'unsupported' | 'unknown'
+
+defineProps<{
+  project: {
+    actualProjectType: string
+    project_type: string
+    loaders: string[]
+    client_side: EnvironmentValue
+    server_side: EnvironmentValue
+    versions: any[]
+  }
+  tags: {
+    gameVersions: GameVersionTag[]
+    loaders: PlatformTag[]
+  }
+}>()
+
+const messages = defineMessages({
+  title: {
+    id: 'project.about.compatibility.title',
+    defaultMessage: 'Compatibility',
+  },
+  minecraftJava: {
+    id: 'project.about.compatibility.game.minecraftJava',
+    defaultMessage: 'Minecraft: Java Edition',
+  },
+  platforms: {
+    id: 'project.about.compatibility.platforms',
+    defaultMessage: 'Platforms',
+  },
+  environments: {
+    id: 'project.about.compatibility.environments',
+    defaultMessage: 'Supported environments',
+  },
+})
+</script>