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/content/ContentListItem.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts" generic="T">
+import AutoLink from '../base/AutoLink.vue'
+import Avatar from '../base/Avatar.vue'
+import Checkbox from '../base/Checkbox.vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { SlashIcon } from '@modrinth/assets'
+
+import { ref } from 'vue'
+
+export interface ContentCreator {
+  name: string
+  type: 'user' | 'organization'
+  id: string
+  link?: string | RouteLocationRaw
+  linkProps?: any
+}
+
+export interface ContentProject {
+  id: string
+  link?: string | RouteLocationRaw
+  linkProps?: any
+}
+
+export interface ContentItem<T> {
+  path: string
+  disabled: boolean
+  filename: string
+  data: T
+
+  icon?: string
+  title?: string
+  project?: ContentProject
+  creator?: ContentCreator
+
+  version?: string
+  versionId?: string
+}
+
+withDefaults(
+  defineProps<{
+    item: ContentItem<T>
+    last?: boolean
+  }>(),
+  {
+    last: false,
+  },
+)
+
+const model = defineModel()
+</script>
+<template>
+  <div
+    class="grid grid-cols-[min-content,4fr,3fr,2fr] gap-3 items-center p-2 h-[64px] border-solid border-0 border-b-button-bg relative"
+    :class="{ 'border-b-[1px]': !last }"
+  >
+    <Checkbox v-model="model" :description="``" class="select-checkbox" />
+    <div
+      class="flex items-center gap-2 text-contrast font-medium"
+      :class="{ 'opacity-50': item.disabled }"
+    >
+      <AutoLink :to="item.project?.link ?? ''" tabindex="-1" v-bind="item.project?.linkProps ?? {}">
+        <Avatar :src="item.icon ?? ''" :class="{ grayscale: item.disabled }" size="48px" />
+      </AutoLink>
+      <div class="flex flex-col">
+        <AutoLink :to="item.project?.link ?? ''" v-bind="item.project?.linkProps ?? {}">
+          <div class="text-contrast line-clamp-1" :class="{ 'line-through': item.disabled }">
+            {{ item.title ?? item.filename }}
+          </div>
+        </AutoLink>
+        <AutoLink :to="item.creator?.link ?? ''" v-bind="item.creator?.linkProps ?? {}">
+          <div class="line-clamp-1 break-all" :class="{ 'opacity-50': item.disabled }">
+            <slot v-if="item.creator && item.creator.name" :item="item">
+              <span class="text-secondary"> by {{ item.creator.name }} </span>
+            </slot>
+          </div>
+        </AutoLink>
+      </div>
+    </div>
+    <div class="flex flex-col max-w-60" :class="{ 'opacity-50': item.disabled }">
+      <div v-if="item.version" class="line-clamp-1 break-all">
+        <slot :creator="item.creator">
+          {{ item.version }}
+        </slot>
+      </div>
+      <div class="text-secondary text-xs line-clamp-1 break-all">{{ item.filename }}</div>
+    </div>
+    <div class="flex justify-end gap-1">
+      <slot name="actions" :item="item" />
+    </div>
+  </div>
+</template>