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/Toggle.vue

@@ -1,19 +1,44 @@
 <template>
-	<input
+	<button
 		:id="id"
-		type="checkbox"
-		class="switch stylized-toggle"
+		type="button"
+		role="switch"
+		:aria-checked="modelValue"
 		:disabled="disabled"
-		:checked="checked"
-		@change="checked = !checked"
-	/>
+		class="relative inline-flex shrink-0 rounded-full m-0 transition-all duration-200 cursor-pointer border-none"
+		:class="[
+			small ? 'h-5 !w-[38px]' : 'h-8 !w-[52px]',
+			modelValue ? 'bg-brand' : 'bg-button-bg',
+			disabled ? 'opacity-50 cursor-not-allowed' : 'btn-wrapper',
+		]"
+		@click="toggle"
+	>
+		<span
+			class="absolute rounded-full transition-all duration-200"
+			:class="[
+				small ? 'w-4 h-4 top-0.5 left-0.5' : 'w-[18px] h-[18px] top-[7px] left-[7px]',
+				modelValue
+					? small
+						? 'translate-x-[18px] bg-black/90'
+						: 'translate-x-5 bg-black/90'
+					: 'bg-gray',
+			]"
+		/>
+	</button>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
 	id?: string
 	disabled?: boolean
+	small?: boolean
 }>()
 
-const checked = defineModel<boolean>()
+const modelValue = defineModel<boolean>()
+
+function toggle() {
+	if (!props.disabled) {
+		modelValue.value = !modelValue.value
+	}
+}
 </script>