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/components/ui/servers/PlatformChangeModpackVersionModal.vue

@@ -32,12 +32,7 @@
 						<label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
 							Erase all data
 						</label>
-						<input
-							id="modpack-hard-reset"
-							v-model="hardReset"
-							class="switch stylized-toggle shrink-0"
-							type="checkbox"
-						/>
+						<Toggle id="modpack-hard-reset" v-model="hardReset" class="shrink-0" />
 					</div>
 					<div>
 						If enabled, existing mods, worlds, and configurations, will be deleted before installing
@@ -69,7 +64,7 @@
 
 <script setup lang="ts">
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectNotificationManager, NewModal } from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, NewModal, Toggle } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
@@ -158,9 +153,3 @@ const hide = () => modal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>

apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue

@@ -53,12 +53,7 @@
 								<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
 									Erase all data
 								</label>
-								<input
-									id="hard-reset"
-									v-model="hardReset"
-									class="switch stylized-toggle shrink-0"
-									type="checkbox"
-								/>
+								<Toggle id="hard-reset" v-model="hardReset" class="shrink-0" />
 							</div>
 							<div>
 								Removes all data on your server, including your worlds, mods, and configuration
@@ -128,6 +123,7 @@ import {
 	ButtonStyled,
 	injectNotificationManager,
 	NewModal,
+	Toggle,
 } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 import { onMounted, onUnmounted } from 'vue'
@@ -255,9 +251,3 @@ const hide = () => mrpackModal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>

apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue

@@ -143,12 +143,7 @@
 						<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
 							Erase all data
 						</label>
-						<input
-							id="hard-reset"
-							v-model="hardReset"
-							class="switch stylized-toggle shrink-0"
-							type="checkbox"
-						/>
+						<Toggle id="hard-reset" v-model="hardReset" class="shrink-0" />
 					</div>
 					<div>
 						Removes all data on your server, including your worlds, mods, and configuration files,
@@ -542,9 +537,3 @@ const hide = () => versionSelectModal.value?.hide()
 
 defineExpose({ show, hide })
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>

apps/frontend/src/components/ui/servers/ServerInstallation.vue

@@ -274,10 +274,6 @@ watch(
 </script>
 
 <style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-
 .button-base:active {
 	scale: none !important;
 }