feat: shared components for worlds + p2p instances (#5135)

* feat: base content card component

* fix: tooltips + colors

* feat: fix orgs

* feat: add ContentModpackCard

* fix: extract types

* feat: selection v-model

* add show icon in selected for combobox with stories

* feat: add project combobox

* clean up project combobox

* feat: start install to play modal

* fix: events

* feat: figma alignments

* feat: migrate toggle to tailwind

* fix: row borders

* feat: disabled state

* feat: virtual list impl for card table based on window scroll

* fix: lint

* feat: virtualization + smaller contentcard items

* feat: fix gap + border issues on last elm

* fix: use TeleportOverflowMenu

* fix: hasUpdate type

* fix: fallback to svg if src is invalid on avatar component

* fix: storybook

* feat: start on updater modal

* feat: finish content updater modal

* feat: i18n pass

* remove install to play modal from ui package

* pnpm prepr

* feat: reusable table component

* feat: add column width prop for table and fix stories

* feat: add table overflow menu story example

* feat: add surface-1.5 and use in table

* chore: export table in index

* fix: allow more loose typing on columns

* feat: update table component to derive key from column instead of data

* feat: surface 1.5 for oled + refactor story for contentcardtable + yeet sorting funcs

* fix: lint

* feat: add no padding story for new modal

---------

Signed-off-by: Calum H. <contact@cal.engineer>
Co-authored-by: tdgao <mr.trumgao@gmail.com>

packages/ui/src/components/base/Avatar.vue

@@ -1,6 +1,6 @@
 <template>
 	<img
-		v-if="src"
+		v-if="src && !failed"
 		ref="img"
 		class="`experimental-styles-within avatar shrink-0"
 		:style="`--_size: ${cssSize}`"
@@ -14,6 +14,7 @@
 		:alt="alt"
 		:loading="loading"
 		@load="updatePixelated"
+		@error="onError"
 	/>
 	<svg
 		v-else
@@ -45,10 +46,11 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const pixelated = ref(false)
 const img = ref(null)
+const failed = ref(false)
 
 const props = defineProps({
 	src: {
@@ -95,6 +97,18 @@ const LEGACY_PRESETS = {
 
 const cssSize = computed(() => LEGACY_PRESETS[props.size] ?? props.size)
 
+watch(
+	() => props.src,
+	() => {
+		failed.value = false
+	},
+)
+
+function onError(e) {
+	console.log('Avatar image failed to load:', props.src, e)
+	failed.value = true
+}
+
 function updatePixelated() {
 	if (img.value && img.value.naturalWidth && img.value.naturalWidth < 32) {
 		pixelated.value = true