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/utils/common-messages.ts

@@ -337,6 +337,38 @@ export const commonMessages = defineMessages({
 		id: 'label.yes',
 		defaultMessage: 'Yes',
 	},
+	updateAvailableLabel: {
+		id: 'label.update-available',
+		defaultMessage: 'Update available',
+	},
+	changelogLabel: {
+		id: 'label.changelog',
+		defaultMessage: 'Changelog',
+	},
+	updateButton: {
+		id: 'button.update',
+		defaultMessage: 'Update',
+	},
+	contentLabel: {
+		id: 'label.content',
+		defaultMessage: 'Content',
+	},
+	versionLabel: {
+		id: 'label.version',
+		defaultMessage: 'Version',
+	},
+	projectLabel: {
+		id: 'label.project',
+		defaultMessage: 'Project',
+	},
+	actionsLabel: {
+		id: 'label.actions',
+		defaultMessage: 'Actions',
+	},
+	noItemsLabel: {
+		id: 'label.no-items',
+		defaultMessage: 'No items',
+	},
 })
 
 export const formFieldLabels = defineMessages({

packages/ui/src/utils/index.ts

@@ -7,4 +7,5 @@ export * from './notices'
 export * from './savable'
 export * from './search'
 export * from './tag-messages'
+export * from './truncate'
 export * from './vue-children'

packages/ui/src/utils/truncate.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'vue'
+import { unref } from 'vue'
+
+/**
+ * Checks if an element's content is truncated (showing ellipsis).
+ * Returns the tooltip text if truncated, undefined otherwise.
+ *
+ * @param element - HTMLElement, Ref<HTMLElement>, or null
+ * @param tooltipText - Text to show in tooltip when truncated
+ * @returns The tooltip text if element is truncated, undefined otherwise
+ *
+ * @example
+ * ```vue
+ * <span ref="titleRef" class="truncate" v-tooltip="truncatedTooltip(titleRef, project.title)">
+ *   {{ project.title }}
+ * </span>
+ * ```
+ */
+export function truncatedTooltip(
+	element: HTMLElement | Ref<HTMLElement | null> | null | undefined,
+	tooltipText: string,
+): string | undefined {
+	const el = unref(element)
+	if (!el) return undefined
+
+	return el.scrollWidth > el.clientWidth ? tooltipText : undefined
+}