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>

packages/ui/src/components/content/ContentListPanel.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts" generic="T">
+import { ref, computed } from 'vue'
+import type { Ref } from 'vue'
+import Checkbox from '../base/Checkbox.vue'
+import ContentListItem from './ContentListItem.vue'
+import type { ContentItem } from './ContentListItem.vue'
+import { DropdownIcon } from '@modrinth/assets'
+// @ts-ignore
+import { RecycleScroller } from 'vue-virtual-scroller'
+
+const props = withDefaults(
+  defineProps<{
+    items: ContentItem<T>[]
+    sortColumn: string
+    sortAscending: boolean
+    updateSort: (column: string) => void
+  }>(),
+  {},
+)
+
+const selectionStates: Ref<Record<string, boolean>> = ref({})
+const selected: Ref<string[]> = computed(() =>
+  Object.keys(selectionStates.value).filter(
+    (item) => selectionStates.value[item] && props.items.some((x) => x.filename === item),
+  ),
+)
+
+const allSelected = ref(false)
+
+const model = defineModel()
+
+function updateSelection() {
+  model.value = selected.value
+}
+
+function setSelected(value: boolean) {
+  if (value) {
+    selectionStates.value = Object.fromEntries(props.items.map((item) => [item.filename, true]))
+  } else {
+    selectionStates.value = {}
+  }
+  updateSelection()
+}
+</script>
+
+<template>
+  <div class="flex flex-col grid-cols-[min-content,auto,auto,auto,auto]">
+    <div
+      :class="`${$slots.headers ? 'flex' : 'grid'} grid-cols-[min-content,4fr,3fr,2fr] gap-3 items-center px-2 pt-1 h-10 mb-3 text-contrast font-bold`"
+    >
+      <Checkbox
+        v-model="allSelected"
+        class="select-checkbox"
+        :indeterminate="selected.length > 0 && selected.length < items.length"
+        @update:model-value="setSelected"
+      />
+      <slot name="headers">
+        <div class="flex items-center gap-2 cursor-pointer" @click="updateSort('Name')">
+          Name
+          <DropdownIcon
+            v-if="sortColumn === 'Name'"
+            class="transition-all transform"
+            :class="{ 'rotate-180': sortAscending }"
+          />
+        </div>
+        <div class="flex items-center gap-1 max-w-60 cursor-pointer" @click="updateSort('Updated')">
+          Updated
+          <DropdownIcon
+            v-if="sortColumn === 'Updated'"
+            class="transition-all transform"
+            :class="{ 'rotate-180': sortAscending }"
+          />
+        </div>
+        <div class="flex justify-end gap-2">
+          <slot name="header-actions" />
+        </div>
+      </slot>
+    </div>
+    <div class="bg-bg-raised rounded-xl">
+      <RecycleScroller
+        v-slot="{ item, index }"
+        :items="items"
+        :item-size="64"
+        disable-transform
+        key-field="filename"
+        style="height: 100%"
+      >
+        <ContentListItem
+          v-model="selectionStates[item.filename]"
+          :item="item"
+          :last="props.items.length - 1 === index"
+          class="mb-2"
+          @update:model-value="updateSelection"
+        >
+          <template #actions="{ item }">
+            <slot name="actions" :item="item" />
+          </template>
+        </ContentListItem>
+      </RecycleScroller>
+    </div>
+  </div>
+</template>