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/assets/styles/components.scss

@@ -223,10 +223,7 @@
 	:where(input) {
 		box-sizing: border-box;
 		max-height: 40px;
-
-		&:not(.stylized-toggle) {
-			max-width: 100%;
-		}
+		max-width: 100%;
 	}
 
 	:where(.adjacent-input, &.adjacent-input) {
@@ -271,10 +268,6 @@
 			&:not(&.small) {
 				flex-direction: column;
 				align-items: flex-start;
-
-				.stylized-toggle {
-					flex-basis: 0;
-				}
 			}
 		}
 	}
@@ -650,64 +643,6 @@ tr.button-transparent {
 	}
 }
 
-.switch {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	-webkit-tap-highlight-color: transparent;
-	cursor: pointer;
-
-	&:focus {
-		//outline: 0; Bad for accessibility
-	}
-}
-
-.stylized-toggle {
-	@extend .button-base;
-
-	box-sizing: content-box;
-	min-height: 32px;
-	height: 32px;
-	width: 52px;
-	max-width: 52px;
-	border-radius: var(--size-rounded-max);
-	display: inline-block;
-	position: relative;
-	margin: 0;
-	transition: all 0.2s ease;
-	background: var(--color-button-bg);
-
-	&:after {
-		content: '';
-		position: absolute;
-		top: 7px;
-		left: 7px;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: var(--color-toggle-handle);
-		transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
-		outline: 2px solid transparent;
-
-		@media (prefers-reduced-motion) {
-			transition: none;
-		}
-	}
-
-	&:checked {
-		background-color: var(--color-brand);
-
-		&:after {
-			transform: translatex(20px);
-			background: var(--color-brand-inverted);
-		}
-	}
-
-	&:hover &:focus {
-		background: var(--color-button-bg);
-	}
-}
-
 .textarea-wrapper {
 	display: flex;
 	flex-direction: column;

apps/frontend/src/assets/styles/global.scss

@@ -60,8 +60,6 @@ html {
 	--color-button-bg-active: #c3c6cb;
 	--color-button-text-active: var(--color-button-text-hover);
 
-	--color-toggle-handle: var(--color-icon);
-
 	--color-dropdown-bg: var(--color-button-bg);
 	--color-dropdown-text: var(--color-button-text);
 
@@ -177,8 +175,6 @@ html {
 	--color-button-bg-active: #616570;
 	--color-button-text-active: var(--color-button-text-hover);
 
-	--color-toggle-handle: var(--color-button-text);
-
 	--color-dropdown-bg: var(--color-button-bg);
 	--color-dropdown-text: var(--color-button-text);