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>

apps/frontend/src/pages/hosting/manage/[id]/content/index.vue

@@ -242,13 +242,11 @@
 												>
 											</div>
 
-											<input
+											<Toggle
 												:id="`toggle-${getStableModKey(mod)}`"
-												:checked="!mod.disabled"
+												:model-value="!mod.disabled"
 												:disabled="mod.changing"
-												class="switch stylized-toggle"
-												type="checkbox"
-												@change="toggleMod(mod)"
+												@update:model-value="toggleMod(mod)"
 											/>
 										</div>
 									</div>
@@ -353,7 +351,13 @@ import {
 	TrashIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
+import {
+	Avatar,
+	ButtonStyled,
+	injectModrinthClient,
+	injectNotificationManager,
+	Toggle,
+} from '@modrinth/ui'
 import type { Mod } from '@modrinth/utils'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
@@ -699,8 +703,4 @@ const filteredMods = computed(() => {
 	height: 1px;
 	visibility: hidden;
 }
-
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
 </style>