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/modal/ConfirmModal.vue

@@ -78,7 +78,7 @@ const props = defineProps({
 	},
 	proceedIcon: {
 		type: Object,
-		default: TrashIcon,
+		default: () => TrashIcon,
 	},
 	proceedLabel: {
 		type: String,

packages/ui/src/components/modal/NewModal.vue

@@ -76,10 +76,10 @@
 					<div
 						ref="scrollContainer"
 						:class="[
-							'overflow-y-auto p-6 !pb-1 sm:pb-6',
-							{ 'pt-12': props.mergeHeader && closable },
+							props.noPadding ? '' : 'overflow-y-auto p-6 !pb-1 sm:pb-6',
+							{ 'pt-12': props.mergeHeader && closable && !props.noPadding },
 						]"
-						:style="{ maxHeight: maxContentHeight }"
+						:style="props.noPadding ? {} : { maxHeight: maxContentHeight }"
 						@scroll="checkScrollState"
 					>
 						<slot> You just lost the game.</slot>
@@ -100,11 +100,17 @@
 					</Transition>
 				</div>
 
-				<div v-else :class="['overflow-y-auto p-6', { 'pt-12': props.mergeHeader && closable }]">
+				<div
+					v-else
+					:class="[
+						props.noPadding ? '' : 'overflow-y-auto p-6',
+						{ 'pt-12': props.mergeHeader && closable && !props.noPadding },
+					]"
+				>
 					<slot> You just lost the game.</slot>
 				</div>
 
-				<div v-if="$slots.actions" class="p-6 pt-0">
+				<div v-if="$slots.actions" class="p-4">
 					<slot name="actions" />
 				</div>
 			</div>
@@ -137,6 +143,8 @@ const props = withDefaults(
 		mergeHeader?: boolean
 		scrollable?: boolean
 		maxContentHeight?: string
+		/** Removes padding from the content area. Useful for edge-to-edge layouts. */
+		noPadding?: boolean
 		/** Max width for the modal (e.g., '460px', '600px'). Defaults to '60rem'. */
 		maxWidth?: string
 		/** Width for the modal body (e.g., '460px', '600px'). */
@@ -160,6 +168,7 @@ const props = withDefaults(
 		// TODO: migrate all modals to use scrollable and remove this prop
 		scrollable: false,
 		maxContentHeight: '70vh',
+		noPadding: false,
 		maxWidth: undefined,
 		width: undefined,
 		disableClose: false,