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>

packages/ui/src/components/project/ProjectHeader.vue

@@ -0,0 +1,74 @@
+<template>
+  <ContentPageHeader>
+    <template #icon>
+      <Avatar :src="project.icon_url" :alt="project.title" size="96px" />
+    </template>
+    <template #title>
+      {{ project.title }}
+    </template>
+    <template #title-suffix>
+      <ProjectStatusBadge
+        v-if="member || project.status !== 'approved'"
+        :status="project.status"
+      />
+    </template>
+    <template #summary>
+      {{ project.description }}
+    </template>
+    <template #stats>
+      <div
+        v-tooltip="
+          `${formatNumber(project.downloads, false)} download${project.downloads !== 1 ? 's' : ''}`
+        "
+        class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold cursor-help"
+      >
+        <DownloadIcon class="h-6 w-6 text-secondary" />
+        {{ formatNumber(project.downloads) }}
+      </div>
+      <div
+        v-tooltip="
+          `${formatNumber(project.followers, false)} follower${project.downloads !== 1 ? 's' : ''}`
+        "
+        class="flex items-center gap-2 border-0 border-solid border-divider pr-4 md:border-r cursor-help"
+      >
+        <HeartIcon class="h-6 w-6 text-secondary" />
+        <span class="font-semibold">
+          {{ formatNumber(project.followers) }}
+        </span>
+      </div>
+      <div class="hidden items-center gap-2 md:flex">
+        <TagsIcon class="h-6 w-6 text-secondary" />
+        <div class="flex flex-wrap gap-2">
+          <TagItem
+            v-for="(category, index) in project.categories"
+            :key="index"
+          >
+            {{ formatCategory(category) }}
+          </TagItem>
+        </div>
+      </div>
+    </template>
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </ContentPageHeader>
+</template>
+<script setup lang="ts">
+import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
+import Badge from '../base/SimpleBadge.vue'
+import Avatar from '../base/Avatar.vue'
+import ContentPageHeader from '../base/ContentPageHeader.vue'
+import { formatCategory, formatNumber, type Project } from '@modrinth/utils'
+import TagItem from '../base/TagItem.vue'
+import ProjectStatusBadge from './ProjectStatusBadge.vue'
+
+withDefaults(
+  defineProps<{
+    project: Project
+    member?: boolean
+  }>(),
+  {
+    member: false,
+  },
+)
+</script>