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>

apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue

@@ -21,11 +21,10 @@
 						</div>
 						<span>{{ prefConfig.description }}</span>
 					</label>
-					<input
+					<Toggle
 						:id="`pref-${key}`"
 						v-model="newUserPreferences[key]"
-						class="switch stylized-toggle flex-none"
-						type="checkbox"
+						class="flex-none"
 						:disabled="prefConfig.implemented === false"
 					/>
 				</div>
@@ -42,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { injectNotificationManager } from '@modrinth/ui'
+import { injectNotificationManager, Toggle } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 
 import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
@@ -117,9 +116,3 @@ const resetPreferences = () => {
 	newUserPreferences.value = { ...userPreferences.value }
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>

apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue

@@ -62,11 +62,9 @@
 							/>
 						</div>
 						<div v-else-if="typeof property === 'boolean'" class="flex justify-end">
-							<input
+							<Toggle
 								:id="`server-property-${index}`"
 								v-model="liveProperties[index]"
-								class="switch stylized-toggle"
-								type="checkbox"
 								:aria-labelledby="`property-label-${index}`"
 							/>
 						</div>
@@ -134,7 +132,7 @@
 
 <script setup lang="ts">
 import { EyeIcon, SearchIcon } from '@modrinth/assets'
-import { Combobox, injectModrinthClient, injectNotificationManager } from '@modrinth/ui'
+import { Combobox, injectModrinthClient, injectNotificationManager, Toggle } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import { computed, inject, ref, watch } from 'vue'
 
@@ -331,9 +329,3 @@ const isComplexProperty = (property: any): boolean => {
 	)
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>

apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue

@@ -69,12 +69,7 @@
 							</span>
 						</div>
 						<div class="flex items-center gap-2">
-							<input
-								id="show-all-versions"
-								v-model="showAllVersions"
-								class="switch stylized-toggle flex-none"
-								type="checkbox"
-							/>
+							<Toggle id="show-all-versions" v-model="showAllVersions" class="flex-none" />
 							<label for="show-all-versions" class="text-sm">Show all Java versions</label>
 						</div>
 						<Combobox
@@ -113,7 +108,7 @@
 
 <script setup lang="ts">
 import { IssuesIcon, UpdatedIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, Combobox, injectNotificationManager, Toggle } from '@modrinth/ui'
 
 import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
@@ -232,9 +227,3 @@ function resetToDefault() {
 	invocation.value = originalInvocation.value ?? ''
 }
 </script>
-
-<style scoped>
-.stylized-toggle:checked::after {
-	background: var(--color-accent-contrast) !important;
-}
-</style>