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/ProjectSidebarDetails.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <h2 class="text-lg m-0">{{ formatMessage(messages.title) }}</h2>
+    <div class="flex flex-col gap-3 font-semibold [&>div]:flex [&>div]:gap-2 [&>div]:items-center">
+      <div>
+        <BookTextIcon aria-hidden="true" />
+        <div>
+          Licensed
+          <a
+            v-if="project.license.url"
+            class="text-link hover:underline"
+            :href="project.license.url"
+            :target="linkTarget"
+            rel="noopener nofollow ugc"
+          >
+            {{ licenseIdDisplay }}
+            <ExternalIcon aria-hidden="true" class="external-icon ml-1 mt-[-1px] inline" />
+          </a>
+          <span
+            v-else-if="
+              project.license.id === 'LicenseRef-All-Rights-Reserved' ||
+              !project.license.id.includes('LicenseRef')
+            "
+          >
+            {{ licenseIdDisplay }}
+          </span>
+          <span v-else>{{ licenseIdDisplay }}</span>
+        </div>
+      </div>
+      <div
+        v-if="project.approved"
+        v-tooltip="dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
+      >
+        <CalendarIcon aria-hidden="true" />
+        <div>
+          {{ formatMessage(messages.published, { date: publishedDate }) }}
+        </div>
+      </div>
+      <div v-else v-tooltip="dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')">
+        <CalendarIcon aria-hidden="true" />
+        <div>
+          {{ formatMessage(messages.created, { date: createdDate }) }}
+        </div>
+      </div>
+      <div
+        v-if="project.status === 'processing' && project.queued"
+        v-tooltip="dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')"
+      >
+        <ScaleIcon aria-hidden="true" />
+        <div>
+          {{ formatMessage(messages.submitted, { date: submittedDate }) }}
+        </div>
+      </div>
+      <div
+        v-if="hasVersions && project.updated"
+        v-tooltip="dayjs(project.updated).format('MMMM D, YYYY [at] h:mm A')"
+      >
+        <VersionIcon aria-hidden="true" />
+        <div>
+          {{ formatMessage(messages.updated, { date: updatedDate }) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { BookTextIcon, CalendarIcon, ScaleIcon, VersionIcon, ExternalIcon } from '@modrinth/assets'
+import { useVIntl, defineMessages } from '@vintl/vintl'
+import { computed, ref } from 'vue'
+import dayjs from 'dayjs'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+  project: {
+    id: string
+    published: string
+    updated: string
+    approved: string
+    queued: string
+    status: string
+    license: {
+      id: string
+      url: string
+    }
+  }
+  linkTarget: string
+  hasVersions: boolean
+}>()
+
+const createdDate = computed(() =>
+  props.project.published ? dayjs(props.project.published).fromNow() : 'unknown',
+)
+const submittedDate = computed(() =>
+  props.project.queued ? dayjs(props.project.queued).fromNow() : 'unknown',
+)
+const publishedDate = computed(() =>
+  props.project.approved ? dayjs(props.project.approved).fromNow() : 'unknown',
+)
+const updatedDate = computed(() =>
+  props.project.updated ? dayjs(props.project.updated).fromNow() : 'unknown',
+)
+
+const licenseIdDisplay = computed(() => {
+  const id = props.project.license.id
+
+  if (id === 'LicenseRef-All-Rights-Reserved') {
+    return 'ARR'
+  } else if (id.includes('LicenseRef')) {
+    return id.replaceAll('LicenseRef-', '').replaceAll('-', ' ')
+  } else {
+    return id
+  }
+})
+
+const messages = defineMessages({
+  title: {
+    id: 'project.about.details.title',
+    defaultMessage: 'Details',
+  },
+  licensed: {
+    id: 'project.about.details.licensed',
+    defaultMessage: 'Licensed {license}',
+  },
+  created: {
+    id: 'project.about.details.created',
+    defaultMessage: 'Created {date}',
+  },
+  submitted: {
+    id: 'project.about.details.submitted',
+    defaultMessage: 'Submitted {date}',
+  },
+  published: {
+    id: 'project.about.details.published',
+    defaultMessage: 'Published {date}',
+  },
+  updated: {
+    id: 'project.about.details.updated',
+    defaultMessage: 'Updated {date}',
+  },
+})
+</script>